如何使用PHP，jQuery和AJAX上传多个文件

Question

我设计了一个简单的表单，允许用户将文件上传到服务器。最初，表单包含一个“浏览”按钮。如果用户想要上传多个文件，他需要点击“添加更多文件”按钮，在该表单中添加另一个“浏览”按钮。提交表单后，文件上载过程将在“upload.php”文件中处理。它适用于上传多个文件。现在我需要使用jQuery的'.submit（）'提交表单，并将'ajax ['.ajax（）']请求发送到'upload.php'文件来处理文件上传。

这是我的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" id="upload" value="Upload File" />

</form>

这是JavaScript：

$(document).ready(function(){

    $('.add_more').click(function(e){

        e.preventDefault();

        $(this).before("<input name='file[]' type='file' />");

    });

});

以下是处理文件上传的代码：

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 />";

}

}

关于如何编写'.submit（）'函数的任何建议都会非常有用。

Answer 1

最后，我通过使用以下代码找到了解决方案：$('body').on('click', '#upload', function(e){&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; var formData = new FormData($(this).parents('form')[0]);&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: 'upload.php',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xhr: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var myXhr = $.ajaxSettings.xhr();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return myXhr;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Data Uploaded: "+data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: formData,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentType: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; processData: false&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; return false;});

Answer 2

HTML<form enctype="multipart/form-data" action="upload.php" method="post">&nbsp; &nbsp; <input name="file[]" type="file" />&nbsp; &nbsp; <button class="add_more">Add More Files</button>&nbsp; &nbsp; <input type="button" value="Upload File" id="upload"/></form>使用Javascript&nbsp;$(document).ready(function(){&nbsp; &nbsp; $('.add_more').click(function(e){&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; $(this).before("<input name='file[]' type='file'/>");&nbsp; &nbsp; });});用于ajax上传$('#upload').click(function() {&nbsp; &nbsp; var filedata = document.getElementsByName("file"),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formdata = false;&nbsp; &nbsp; if (window.FormData) {&nbsp; &nbsp; &nbsp; &nbsp; formdata = new FormData();&nbsp; &nbsp; }&nbsp; &nbsp; var i = 0, len = filedata.files.length, img, reader, file;&nbsp; &nbsp; for (; i < len; i++) {&nbsp; &nbsp; &nbsp; &nbsp; file = filedata.files[i];&nbsp; &nbsp; &nbsp; &nbsp; if (window.FileReader) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.onloadend = function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showUploadedItem(e.target.result, file.fileName);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(file);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (formdata) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formdata.append("file", file);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; if (formdata) {&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "/path to upload/",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: formdata,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; processData: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentType: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(res) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function(res) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });PHPfor($i=0; $i<count($_FILES['file']['name']); $i++){&nbsp; &nbsp; $target_path = "uploads/";&nbsp; &nbsp; $ext = explode('.', basename( $_FILES['file']['name'][$i]));&nbsp; &nbsp; $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1];&nbsp;&nbsp; &nbsp; if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {&nbsp; &nbsp; &nbsp; &nbsp; echo "The file has been uploaded successfully <br />";&nbsp; &nbsp; } else{&nbsp; &nbsp; &nbsp; &nbsp; echo "There was an error uploading the file, please try again! <br />";&nbsp; &nbsp; }}/**&nbsp;&nbsp; &nbsp; Edit: $target_path variable need to be reinitialized and should&nbsp;&nbsp; &nbsp; be inside for loop to avoid appending previous file name to new one.&nbsp;*/请使用上面的脚本脚本进行ajax上传。它会工作

Answer 3

我的解决方案假设表单id =“my_form_id”它从HTML中检测表单方法和表单操作jQuery代码$('#my_form_id').on('submit', function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; var formData = new FormData($(this)[0]);&nbsp; &nbsp; var msg_error = 'An error has occured. Please try again later.';&nbsp; &nbsp; var msg_timeout = 'The server is not responding';&nbsp; &nbsp; var message = '';&nbsp; &nbsp; var form = $('#my_form_id');&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; data: formData,&nbsp; &nbsp; &nbsp; &nbsp; async: false,&nbsp; &nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; &nbsp; processData: false,&nbsp; &nbsp; &nbsp; &nbsp; contentType: false,&nbsp; &nbsp; &nbsp; &nbsp; url: form.attr('action'),&nbsp; &nbsp; &nbsp; &nbsp; type: form.attr('method'),&nbsp; &nbsp; &nbsp; &nbsp; error: function(xhr, status, error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (status==="timeout") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(msg_timeout);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(msg_error);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; success: function(response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(response);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; timeout: 7000&nbsp; &nbsp; });});