ajaxfileupload.js
是一個用于處理文件上傳的 JavaScript 庫,它使用 AJAX 技術實現無刷新提交表單。要處理文件上傳進度,你需要使用該庫提供的進度事件監聽和處理方法。
以下是一個簡單的示例,展示了如何使用 ajaxfileupload.js
處理文件上傳進度:
ajaxfileupload.js
庫。你可以從官方網站下載庫文件,或者通過 CDN 引入。例如:<script src="ajaxfileupload.js"></script>
<form id="file-upload-form" enctype="multipart/form-data">
<input type="file" name="file" id="file-input" />
<button type="submit">上傳文件</button>
</form>
document.getElementById('file-upload-form').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表單的默認提交行為
var fileInput = document.getElementById('file-input');
var file = fileInput.files[0];
if (!file) {
alert('請選擇一個文件');
return;
}
// 使用 ajaxfileupload.js 發送文件
$.ajaxFileUpload({
url: 'your-upload-url', // 你的文件上傳接口地址
secureuri: false,
fileElementId: 'file-input',
dataType: 'json',
success: function(data, status) {
console.log('文件上傳成功:', data);
},
error: function(data, status, e) {
console.log('文件上傳失敗:', e);
},
progress: function(data, status) {
var progress = parseInt(data.loaded / data.total * 100);
console.log('上傳進度:', progress + '%');
// 在這里更新進度條或其他 UI 元素以顯示上傳進度
}
});
});
在這個示例中,我們首先阻止了表單的默認提交行為,然后使用 ajaxfileupload.js
發送文件。在文件上傳過程中,progress
事件會被觸發,我們可以通過計算已上傳的字節數和總字節數來獲取上傳進度,并更新進度條或其他 UI 元素以顯示上傳進度。
請注意,你需要將示例中的 your-upload-url
替換為你自己的文件上傳接口地址。