AjaxFileUpload.js 本身不支持批量上傳,但您可以通過修改源代碼或結合其他插件來實現批量上傳功能。以下是一個簡單的實現方法:
首先,確保您已經在項目中引入了 AjaxFileUpload.js。如果沒有,請從官方網站下載并引入。
在 HTML 文件中,創建一個包含多個文件輸入字段的表單:
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="files[]" multiple>
<button type="submit">上傳</button>
</form>
注意:multiple
屬性允許用戶選擇多個文件,name="files[]"
使服務器能夠接收多個文件,[]
表示這是一個文件數組。
AjaxFileUpload.js
文件中找到 sendRequest
函數,將以下代碼:var formData = new FormData();
formData.append(this.options.fileElementId, file);
替換為:
var formData = new FormData();
for (var i = 0; i < fileList.length; i++) {
formData.append(this.options.fileElementId, fileList[i]);
}
這里,我們使用了一個循環來遍歷所有選定的文件,并將它們添加到 formData
對象中。
batchUpload.js
),并在其中編寫以下代碼:$(document).ready(function () {
$('#uploadForm').submit(function (e) {
e.preventDefault();
var options = {
url: 'your_upload_url', // 您的上傳 URL
secureuri: false,
fileElementId: 'files[]',
dataType: 'json',
success: function (data, status) {
console.log('上傳成功:', data);
},
error: function (data, status, e) {
console.log('上傳失敗:', data);
},
};
$.ajaxFileUpload(options, function (data, status) {
// 這里可以處理服務器返回的響應,例如顯示上傳成功的文件列表等
});
});
});
這段代碼會監聽表單的提交事件,并在提交時使用修改后的 AjaxFileUpload.js
發送批量上傳請求。
現在,您應該可以實現使用 AjaxFileUpload.js 進行批量上傳的功能了。請注意,這個示例僅用于演示目的,您可能需要根據實際需求進行調整。