概述：
上传多个文件到服务器是Web开发中的常见需求。 jQuery 的“.submit()”和“.ajax()”方法提供了一种异步提交表单和向服务器发送数据的便捷方法。本文介绍如何使用这些方法来促进多个文件上传。
表单 HTML：
HTML 表单应包含多个文件输入字段，一个“添加更多”文件”按钮和提交按钮。单击“添加更多文件”按钮时，会动态添加其他文件输入字段。
<form enctype="multipart/form-data" action="upload.php" method="post">
<input name="file[]" type="file">
<button class="add_more">Add More Files</button>
<input type="button">用于动态文件输入添加的 JavaScript：
JavaScript 代码当“添加更多文件”按钮按下时，使用 jQuery 添加额外的文件输入字段单击。
$(document).ready(function(){
$('.add_more').click(function(e){
e.preventDefault();
$(this).before("<input name='file[]' type='file'>");
});
});上传脚本：
服务器端 PHP 脚本（'upload.php'）处理文件上传过程，包括验证和保存到目标目录。它采用分层目录结构来组织上传的文件。
for($i=0; $i<count($_FILES['file']['name']); $i++){
$target_path = "uploads/";
$ext = explode('.', basename( $_FILES['file']['name'][$i]));
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1];
if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
echo "The file has been uploaded successfully <br />";
} else{
echo "There was an error uploading the file, please try again! <br />";
}
}用于 AJAX 文件提交的 jQuery：
最后，'.submit()' 和 ' .ajax()' 方法用于将事件侦听器绑定到提交按钮。单击时，AJAX 请求将发送到“upload.php”脚本，上传的文件数据将使用 FormData 对象包含在请求中。 jQuery 的“成功”函数处理服务器响应。
$('body').on('click', '#upload', function(e){
e.preventDefault();
var formData = new FormData($(this).parents('form')[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
success: function (data) {
alert("Data Uploaded: "+data);
},
data: formData,
cache: false,
contentType: false,
processData: false
});
return false;
});通过实现这种方法，您可以使用 PHP、jQuery 和 AJAX 有效地异步上传多个文件。
以上是如何使用 jQuery 的 `.submit()` 和 `.ajax()` 进行异步多个文件上传？的详细内容。更多信息请关注PHP中文网其他相关文章！
