使用AJAX、PHP 和jQuery 上傳多個圖像
如果您不熟悉的話，使用AJAX 上傳多個圖像可能會很困難。過程。本文將引導您完成所涉及的步驟，並專注於 HTML、jQuery/AJAX 和 PHP 程式碼的關鍵元件。我們還將提供一個工作代碼範例來說明解決方案。
HTML
HTML 程式碼定義使用者可以選擇多個影像上傳的表單。它包含一個具有 multiple 屬性的輸入字段，允許使用者一次選擇多個圖像。我們還將為每個文件新增一個進度條以指示上傳狀態。
<form>
jQuery/AJAX
jQuery/AJAX 程式碼處理檔案上傳過程。當使用者選擇檔案時，我們使用更改事件來觸發上傳。然後，我們迭代每個選定的文件，為每個文件建立一個新的進度條。
$(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中文網其他相關文章！
