如何使用 PHP、jQuery 和 AJAX 实现多文件上传器？

如何使用 PHP、jQuery 和 AJAX 实现多个文件的文件上传器

用于文件上传表单以启用多文件选择，用户通常单击“添加更多文件”按钮，动态添加更多“浏览”按钮。此功能可以使用 jQuery 和 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 函数处理程序，以动态添加其他文件上传输入：

$(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实现

要通过 AJAX 提交表单，请修改“上传文件”按钮的 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;
});

此代码从表单创建一个 FormData 对象数据，设置适当的 AJAX 选项，然后提交表单。服务器响应（在本例中为简单的确认消息）显示在警报对话框中。

通过这些修改，您的表单将使用 AJAX 动态提交，允许用户一次上传多个文件。

以上是如何使用 PHP、jQuery 和 AJAX 实现多文件上传器？的详细内容。更多信息请关注PHP中文网其他相关文章！