首頁 >後端開發 >php教程 >如何使用 PHP、jQuery 和 AJAX 處理多個檔案上傳?

如何使用 PHP、jQuery 和 AJAX 處理多個檔案上傳?

Susan Sarandon
Susan Sarandon原創
2024-11-26 11:38:10217瀏覽

How to Handle Multiple File Uploads with PHP, jQuery, and AJAX?

使用PHP、jQuery 和AJAX 處理多個檔案上傳

在這篇文章中,我們將探討如何使用PHP、jQuery 和AJAX 有效處理多個檔案上傳。我們將把這個過程分為三個步驟:準備表單、使用 jQuery 新增功能、處理文件上傳。

準備表單

先建立包含多個檔案瀏覽按鈕的 HTML 表單。每個檔案輸入都應將 name 屬性設為 file[],表示它可以處理檔案陣列。包含表單提交按鈕。

新增 jQuery 功能

利用 jQuery 增加其他檔案瀏覽按鈕的功能。為「新增更多檔案」按鈕實作一個點擊處理程序,動態地將新檔案輸入元素新增至表單。

處理檔案上傳

在 PHP 腳本中,我們處理檔案上傳。使用循環遍歷 $_FILES['file'] 數組中的每個檔案。上傳檔案的目標路徑是唯一產生的,以防止覆蓋。文件移動到目標路徑後,返回成功或錯誤訊息。

使用AJAX 提交表單

要透過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;
});

此函數將按一下處理程式綁定到「上傳檔案」按鈕,建立一個包含以下內容的FormData 物件:表單數據,向upload.php 發送AJAX請求,處理伺服器回應,並阻止預設表單提交。

以上是如何使用 PHP、jQuery 和 AJAX 處理多個檔案上傳?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn