ホームページ > ウェブフロントエンド > jsチュートリアル > AJAX、PHP、jQuery を使用して複数の画像をアップロードするにはどうすればよいですか?

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

Linda Hamilton
リリース: 2024-12-13 03:04:09
オリジナル
521 人が閲覧しました

How to Upload Multiple Images Using AJAX, PHP, and jQuery?

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

AJAX に慣れていない場合、AJAX を使用して複数の画像をアップロードするのは難しい場合があります。プロセス。この記事では、HTML、jQuery/AJAX、および PHP コードの主要コンポーネントに焦点を当てながら、関連する手順を説明します。解決策を説明するための実際のコード例も提供します。

HTML

HTML コードは、ユーザーがアップロードする複数の画像を選択できるフォームを定義します。これには、複数属性を持つ入力フィールドが含まれており、ユーザーは一度に複数の画像を選択できます。また、各ファイルのアップロード ステータスを示す進行状況バーも追加します。

<form>
ログイン後にコピー

jQuery/AJAX

jQuery/AJAX コードはファイルのアップロードを処理します。プロセス。ユーザーがファイルを選択したときに、change イベントを使用してアップロードをトリガーします。次に、選択した各ファイルを反復処理して、ファイルごとに新しい進行状況バーを作成します。

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

    // list all file data
    $.each(This.files, function(i, obj){
        // for each image run script asynchronous
        (function(i) {
            // get data from input file
            var file = This.files[i],
                name = file.name,
                size = file.size,
                type = file.type,
                lastModified        =   file.lastModified,
                lastModifiedDate    =   file.lastModifiedDate,
                webkitRelativePath  =   file.webkitRelativePath,
                //slice               =   file.slice,
                i = i;

            // DEBUG
       /*
            var acc = []
            $.each(file, function(index, value) {
                acc.push(index + ": " + value);
            });
            alert(JSON.stringify(acc));
        */

            $.ajax({
                url:'/ajax/upload.php',
                contentType: "multipart/form-data",
                data:{
                        "image":
                        {
                            "name":name,
                            "size":size,
                            "type":type,
                            "lastModified":lastModified,
                            "lastModifiedDate":lastModifiedDate,
                            "webkitRelativePath":webkitRelativePath,
                            //"slice":slice,
                        }
                    },
                type: "POST",
                // Custom XMLHttpRequest
                xhr: function() {
                    var myXhr = $.ajaxSettings.xhr();
                    // Check if upload property exists
                    if(myXhr.upload)
                    {
                        // For handling the progress of the upload
                        myXhr.upload.addEventListener("progress",progressHandlingFunction, false); 
                    }
                    return myXhr;
                },
                cache: false,
                success : function(data){
                    // load ajax data
                    $("#listTable").append(data);
                }
            });
            // display progress
            function progressHandlingFunction(e){
                if(e.lengthComputable){
                    var perc = Math.round((e.loaded / e.total)*100);
                    perc = ( (perc >= 100) ? 100 : ( (perc <= 0) ? 0 : 0 ) );
                $("#progress"+i+" > div")
                    .attr({"aria-valuenow":perc})
                        .css("width", perc+"%");
                }
            }
            // display list of files
            display.append('<li>'+name+'</li><div class="progress">
ログイン後にコピー

PHP

最後に、PHP コードは、ファイルのアップロードを処理します。サーバー側。アップロードされたファイルを受信して​​処理します。

<?php
    if (isset($_POST["image"])) {
        // do php stuff
        // call `json_encode` on `file` object
        $file = json_encode($_POST["file"]);
        // return `file` as `json` string
        echo $file;
    }
?>
ログイン後にコピー

結論

これらのコンポーネントを組み合わせることで、AJAX、PHP、jQuery を使用して複数の画像のアップロードを実現できます。この機能により、ユーザーは複数の画像を一度に簡単にアップロードできるため、ユーザー エクスペリエンスが向上し、ファイル アップロード プロセスが合理化されます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート