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 サイトの他の関連記事を参照してください。