使用 jQuery、AJAX 和 PHP 上傳多個(gè)文件

簡(jiǎn)介

將多個(gè)文件從 Web 表單上傳到服務(wù)器是 Web 開發(fā)中的常見任務(wù)。在本文中，我們將指導(dǎo)您完成使用 PHP、jQuery 和 AJAX 上傳多個(gè)文件的過程。

表單設(shè)計(jì)

第一步是創(chuàng)建一個(gè)允許用戶選擇的表單并上傳文件。以下 HTML 標(biāo)記代表一個(gè)簡(jiǎn)單的表單，最初包含一個(gè)文件輸入字段：

<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

為了允許用戶上傳多個(gè)文件，我們將使用 jQuery 來單擊“添加更多文件”按鈕時(shí)動(dòng)態(tài)添加其他文件輸入字段：

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

PHP 文件處理

表單操作屬性設(shè)置為“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;
});

通過使用此代碼，您可以動(dòng)態(tài)創(chuàng)建文件輸入字段，處理文件上傳服務(wù)器端使用 PHP，并使用 AJAX 異步提交表單，允許多個(gè)文件上傳而無需重新加載頁面。

以上是如何使用 jQuery、AJAX 和 PHP 上傳多個(gè)文件？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！