AJAX、PHP、jQuery を使用して複数の画像を効率的にアップロードするにはどうすればよいですか?-jsチュートリアル-php.cn

AJAX、PHP、jQuery を使用して複数の画像を効率的にアップロードするにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-24 18:20:14

オリジナル

874 人が閲覧しました

How can I efficiently upload multiple images using AJAX, PHP, and jQuery?

AJAX、PHP、および jQuery を使用した複数の画像のアップロード

この説明では、AJAX 技術を使用した複数の画像のアップロードの問題について説明します。ユーザーは、AJAX 経由で複数のファイルを送信する際に問題が発生し、ファイル配信が不完全になると述べています。この記事では、JSON を活用してファイルオブジェクトを効率的に処理し、アップロードを成功させる包括的なソリューションを提供します。

HTML

次の HTML コードは、Web ページの構造を確立します。、ドラッグアンドドロップ機能、ファイル入力、アップロードの進行状況を表示するセクションなどの要素が含まれます。結果:

<div>

ログイン後にコピー

CSS

ユーザーインターフェイスを強化し、ファイルのアップロードプロセス中に視覚的な手がかりを提供するためにスタイルが適用されます:

#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 /><li>", img, "</li><br />");
                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 アプローチによりファイル送信が簡素化され、進行状況追跡の使用により、アップロードステータスに関するリアルタイムのフィードバックが提供されるため、ユーザーエクスペリエンスが向上します。

以上がAJAX、PHP、jQuery を使用して複数の画像を効率的にアップロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。