使用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脚本会循环处理所有上传的图片，并将它们移动到指定的上传目录。