使用 AJAX、PHP 和 jQuery 上傳多個圖像

在本討論中，解決了使用 AJAX 技術(shù)上傳多個圖像的問題。用戶描述在通過 AJAX 傳輸多個文件時遇到了困難，導(dǎo)致文件傳輸不完整。本文提供了一個全面的解決方案，利用 JSON 高效處理文件對象并促進(jìn)成功上傳。

HTML

以下 HTML 代碼建立了網(wǎng)頁的結(jié)構(gòu)，包括用于拖放功能的元素、文件輸入以及用于顯示上傳進(jìn)度和結(jié)果：

<div>

CSS

應(yīng)用樣式來增強(qiáng)用戶界面并在文件上傳過程中提供視覺提示：

#uploads {
  display: block;
  position: relative;
}

#uploads li {
  list-style: none;
}

JavaScript

JavaScript 代碼處理文件上傳過程中，利用 AJAX 與服務(wù)器進(jìn)行通信。它利用 JSON 封裝文件數(shù)據(jù)和 HTML5 技術(shù)進(jìn)行進(jìn)度跟蹤：

$(document).on("change", "input[name^='file']", function (e) {
    e.preventDefault();
    var This = this,
        display = $("#uploads");

    // process file object
    $.each(This.files, function (i, file) {
        var reader = new FileReader(),
            dfd = new $.Deferred();
        reader.onload = function (e) {
            // convert file to data URL
            dfd.resolveWith(file, [e.target.result])
        };
        reader.readAsDataURL(new Blob([file], {
            "type": file.type
        }));
        dfd.then(function (data) {
            // send file data using AJAX
            $.ajax({
                url: "/echo/json/",
                type: "POST",
                data: {
                    "file": JSON.stringify({
                        "file": data,
                        "name": file.name,
                        "size": file.size,
                        "type": file.type
                    })
                }
            })
            .then(function (data, textStatus, jqxhr) {
                console.log(data)
                display.append("<br /><li>", img, "</li><br />");
                return data
            }, function (jqxhr, textStatus, errorThrown) {
                console.log(errorThrown);
                return errorThrown
            });
        })
    });
});

PHP

PHP 腳本接收以 JSON 格式編碼的文件數(shù)據(jù)并返回作為 JSON 字符串：

<?php
if (isset($_POST["file"])) {
    // process file object
    $file = json_encode($_POST["file"]);
    // return file as JSON string
    echo $file;
};
?>

通過實現(xiàn)這些技術(shù)，您可以使用 AJAX、PHP 和jQuery。 JSON方式簡化了文件傳輸，進(jìn)度跟蹤的使用通過提供上傳狀態(tài)的實時反饋增強(qiáng)了用戶體驗。

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