要使用ajaxfileupload.js顯示上傳進(jìn)度,請(qǐng)按照以下步驟操作:
<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;">上傳進(jìn)度: 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') {
// 上傳出錯(cuò)時(shí)顯示錯(cuò)誤信息
$('#uploadProgress').html('上傳出錯(cuò): ' + data.error);
} else {
// 更新上傳進(jìn)度
var progress = parseInt(data.progress);
$('#uploadProgress').html('上傳進(jìn)度: ' + progress + '%');
// 如果上傳未完成,可以在此處遞歸調(diào)用以持續(xù)更新進(jìn)度
if (progress < 100) {
updateUploadProgress(progress);
}
}
},
error: function (data, status, e) {
// 上傳出錯(cuò)時(shí)顯示錯(cuò)誤信息
$('#uploadProgress').html('上傳出錯(cuò): ' + 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') {
// 上傳出錯(cuò)時(shí)顯示錯(cuò)誤信息
$('#uploadProgress').html('上傳出錯(cuò): ' + data.error);
} else {
// 更新上傳進(jìn)度
$('#uploadProgress').html('上傳進(jìn)度: ' + data.progress + '%');
// 如果上傳未完成,可以在此處遞歸調(diào)用以持續(xù)更新進(jìn)度
if (data.progress < 100) {
updateUploadProgress(data.progress);
}
}
},
error: function (data, status, e) {
// 上傳出錯(cuò)時(shí)顯示錯(cuò)誤信息
$('#uploadProgress').html('上傳出錯(cuò): ' + data.error);
}
});
}
請(qǐng)注意,這個(gè)示例假設(shè)您已經(jīng)有一個(gè)處理文件上傳的服務(wù)器端腳本(例如PHP、Python等)。您需要根據(jù)實(shí)際情況修改your_upload_url
。