使用jquery上传多个图像

使用jQuery上传多个图片，你可以创建一个表单，其中包含一个文件输入字段，允许用户选择多个图片。然后使用jQuery的ajax方法来异步上传这些图片。以下是一个简单的例子：

HTML 部分:

<form id="imageUploadForm" method="post" enctype="multipart/form-data">
    <input type="file" id="images" name="images" multiple>
    <button type="submit">上传图片</button>
</form>

JavaScript 部分 (使用 jQuery):

$(document).ready(function() {
    $('#imageUploadForm').submit(function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
 
        var formData = new FormData($(this)[0]); // 创建FormData对象
 
        $.ajax({
            url: 'your-server-upload-script.php', // 服务器上传脚本的URL
            type: 'POST',
            data: formData,
            contentType: false, // 不设置内容类型
            processData: false, // 不处理发送的数据
            success: function(response) {
                console.log('图片上传成功:', response);
            },
            error: function() {
                console.log('图片上传失败');
            }
        });
    });
});

在服务器端，你需要一个能够处理多图上传的脚本。以下是一个PHP示例：

<?php
if(isset($_FILES['images']['name'][0])) { // 检查是否有上传的文件
    $total = count($_FILES['images']['name']); // 获取文件数量
 
    for ($i = 0; $i < $total; $i++) { // 循环上传所有文件
        $tmpFilePath = $_FILES['images']['tmp_name'][$i];
        if ($tmpFilePath != ""){
            // 设置上传路径
            $newFilePath = "./uploads/" . $_FILES['images']['name'][$i];
 
            // 上传文件
            if(move_uploaded_file($tmpFilePath, $newFilePath)) {
                echo "文件上传成功: " . $newFilePath;
            } else {
                echo "文件上传失败: " . $_FILES['images']['name'][$i];
            }
        }
    }
} else {
    echo "没有文件上传";
}
?>

确保服务器上的上传目录（这例子中是"./uploads/"）存在并且有写权限。这个PHP脚本会循环处理所有上传的图片，并将它们移动到指定的上传目录。