如何使用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){
        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;
});