php - 如何使用 PHP、jQuery 和 AJAX 上传多个文件

Question

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

这是我的 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;
});