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