如何使用 jQuery 的 `.submit()` 和 `.ajax()` 进行异步多个文件上传？

使用 jQuery 的 '.submit()' 和 '.ajax()' 通过 AJAX 提交文件

概述：

上传多个文件到服务器是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中文网其他相关文章！