如何使用 AJAX、PHP 和 jQuery 高效上传多个图像？

使用 AJAX、PHP 和 jQuery 上传多个图像

在本讨论中，解决了使用 AJAX 技术上传多个图像的问题。用户描述在通过 AJAX 传输多个文件时遇到了困难，导致文件传输不完整。本文提供了一个全面的解决方案，利用 JSON 高效处理文件对象并促进成功上传。

HTML

以下 HTML 代码建立了网页的结构，包括用于拖放功能的元素、文件输入以及用于显示上传进度和结果：

<div>
<p><strong>CSS</strong></p>
<p>应用样式来增强用户界面并在文件上传过程中提供视觉提示：</p>
<pre class="brush:php;toolbar:false">#uploads {
  display: block;
  position: relative;
}

#uploads li {
  list-style: none;
}

JavaScript

JavaScript 代码处理文件上传过程中，利用 AJAX 与服务器进行通信。它利用 JSON 封装文件数据和 HTML5 技术进行进度跟踪：

$(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>

", img, "

"); return data }, function (jqxhr, textStatus, errorThrown) { console.log(errorThrown); return errorThrown }); }) }); });

PHP

PHP 脚本接收以 JSON 格式编码的文件数据并返回作为 JSON 字符串：

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

通过实现这些技术，您可以使用 AJAX、PHP 和jQuery。 JSON方式简化了文件传输，进度跟踪的使用通过提供上传状态的实时反馈增强了用户体验。