要使用ajaxfileupload.js顯示上傳進度,請按照以下步驟操作:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ajaxfileupload/1.0.3/ajaxfileupload.min.js"></script>
<div id="uploadProgress" style="width: 100%; background-color: #eee;">上傳進度: 0%</div>
$.ajaxFileUpload({
url: 'your_upload_url', // 替換為您的上傳URL
secureuri: false,
fileElementId: 'fileToUpload', // 替換為HTML文件輸入元素的ID
dataType: 'json',
success: function (data, status) {
if (typeof (data.error) != 'undefined') {
// 上傳出錯時顯示錯誤信息
$('#uploadProgress').html('上傳出錯: ' + data.error);
} else {
// 更新上傳進度
var progress = parseInt(data.progress);
$('#uploadProgress').html('上傳進度: ' + progress + '%');
// 如果上傳未完成,可以在此處遞歸調用以持續更新進度
if (progress < 100) {
updateUploadProgress(progress);
}
}
},
error: function (data, status, e) {
// 上傳出錯時顯示錯誤信息
$('#uploadProgress').html('上傳出錯: ' + data.error);
}
});
function updateUploadProgress(progress) {
$.ajaxFileUpload({
url: 'your_upload_url', // 替換為您的上傳URL
secureuri: false,
fileElementId: 'fileToUpload', // 替換為HTML文件輸入元素的ID
dataType: 'json',
success: function (data, status) {
if (typeof (data.error) != 'undefined') {
// 上傳出錯時顯示錯誤信息
$('#uploadProgress').html('上傳出錯: ' + data.error);
} else {
// 更新上傳進度
$('#uploadProgress').html('上傳進度: ' + data.progress + '%');
// 如果上傳未完成,可以在此處遞歸調用以持續更新進度
if (data.progress < 100) {
updateUploadProgress(data.progress);
}
}
},
error: function (data, status, e) {
// 上傳出錯時顯示錯誤信息
$('#uploadProgress').html('上傳出錯: ' + data.error);
}
});
}
請注意,這個示例假設您已經有一個處理文件上傳的服務器端腳本(例如PHP、Python等)。您需要根據實際情況修改your_upload_url
。