当前位置：首页 > PHP

php实现多图上传

2026-02-28 02:09:23PHP

多图上传实现方法

使用HTML表单结合PHP处理文件上传是实现多图上传的常见方式。以下是具体实现步骤：

HTML表单部分 创建包含文件输入字段的表单，设置multiple属性允许选择多个文件：

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="images[]" multiple>
    <input type="submit" value="上传">
</form>

PHP处理脚本 在服务器端处理上传的文件：

php实现多图上传

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $uploadDir = 'uploads/';

    foreach ($_FILES['images']['tmp_name'] as $key => $tmpName) {
        $fileName = $_FILES['images']['name'][$key];
        $fileTmp = $_FILES['images']['tmp_name'][$key];
        $fileSize = $_FILES['images']['size'][$key];
        $fileError = $_FILES['images']['error'][$key];

        if ($fileError === UPLOAD_ERR_OK) {
            $destination = $uploadDir . basename($fileName);
            move_uploaded_file($fileTmp, $destination);
        }
    }
}

安全增强措施

增加文件类型验证和大小限制能提高上传安全性：

$allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
$maxSize = 2 * 1024 * 1024; // 2MB

foreach ($_FILES['images']['tmp_name'] as $key => $tmpName) {
    $fileType = $_FILES['images']['type'][$key];

    if (!in_array($fileType, $allowedTypes)) {
        continue;
    }

    if ($_FILES['images']['size'][$key] > $maxSize) {
        continue;
    }

    // 生成唯一文件名
    $ext = pathinfo($_FILES['images']['name'][$key], PATHINFO_EXTENSION);
    $newFileName = uniqid() . '.' . $ext;
    move_uploaded_file($tmpName, $uploadDir . $newFileName);
}

使用AJAX实现异步上传

通过jQuery实现无刷新上传：

php实现多图上传

$('#uploadForm').on('submit', function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            alert('上传成功');
        }
    });
});

文件预览功能

在客户端实现上传前预览：

document.querySelector('input[type="file"]').addEventListener('change', function(e) {
    var preview = document.getElementById('preview');
    preview.innerHTML = '';

    Array.from(e.target.files).forEach(file => {
        var reader = new FileReader();
        reader.onload = function(event) {
            var img = document.createElement('img');
            img.src = event.target.result;
            img.style.height = '100px';
            preview.appendChild(img);
        }
        reader.readAsDataURL(file);
    });
});

错误处理机制

完善PHP端的错误处理：

try {
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0755, true);
    }

    foreach ($_FILES['images']['error'] as $key => $error) {
        if ($error !== UPLOAD_ERR_OK) {
            throw new Exception('文件上传错误: ' . $error);
        }

        if (!is_uploaded_file($_FILES['images']['tmp_name'][$key])) {
            throw new Exception('非法文件上传');
        }
    }
} catch (Exception $e) {
    error_log($e->getMessage());
    http_response_code(500);
    echo json_encode(['error' => $e->getMessage()]);
}

以上方法组合使用可以实现安全可靠的多图上传功能，包括客户端预览、服务器端验证和异步上传体验优化。