如何使用 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中文網其他相關文章！