Memuat naik Berbilang Imej menggunakan AJAX, PHP dan jQuery
Memuat naik berbilang imej menggunakan AJAX boleh mencabar jika anda tidak biasa dengan proses. Artikel ini akan membimbing anda melalui langkah-langkah yang terlibat, menyerlahkan komponen utama kod HTML, jQuery/AJAX dan PHP. Kami juga akan menyediakan contoh kod yang berfungsi untuk menggambarkan penyelesaiannya.
HTML
Kod HTML mentakrifkan borang di mana pengguna boleh memilih berbilang imej untuk dimuat naik. Ia mengandungi medan input dengan berbilang atribut, yang membolehkan pengguna memilih lebih daripada satu imej sekaligus. Kami juga akan menambah bar kemajuan untuk setiap fail untuk menunjukkan status muat naik.
<form>
jQuery/AJAX
Kod jQuery/AJAX mengendalikan muat naik fail proses. Kami menggunakan peristiwa perubahan untuk mencetuskan muat naik apabila pengguna memilih fail. Kami kemudiannya mengulangi setiap fail yang dipilih, mencipta bar kemajuan baharu untuk setiap fail.
$(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
Akhir sekali, kod PHP mengendalikan muat naik fail pada bahagian pelayan. Ia menerima fail yang dimuat naik dan memprosesnya.
<?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; } ?>
Kesimpulan
Menggabungkan komponen ini, kami boleh mencapai pelbagai muat naik imej menggunakan AJAX, PHP dan jQuery. Fungsi ini membolehkan pengguna memuat naik berbilang imej serentak dengan mudah, mempertingkatkan pengalaman pengguna dan memperkemas proses muat naik fail.
Atas ialah kandungan terperinci Bagaimana untuk Muat Naik Berbilang Imej Menggunakan AJAX, PHP, dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!