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

使用 jQuery、AJAX 和 PHP 上传多个文件

简介

将多个文件从 Web 表单上传到服务器是 Web 开发中的常见任务。在本文中，我们将指导您完成使用 PHP、jQuery 和 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">

用于添加更多文件的 jQuery

为了允许用户上传多个文件，我们将使用 jQuery 来单击“添加更多文件”按钮时动态添加其他文件输入字段：

$(document).ready(function(){
    $('.add_more').click(function(e){
        e.preventDefault();
        $(this).before("<input name='file[]' type='file' />");
    });
});

PHP 文件处理

表单操作属性设置为“upload.php”，这是将处理文件上传的PHP脚本。下面是 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 的 .submit() 和 .ajax() 方法:

$('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，并使用 AJAX 异步提交表单，允许多个文件上传而无需重新加载页面。

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