我試圖使用Ajax下載文件並顯示自定義下載進度條。顯示使用XHR2/AJAX下載文件的進度條
問題是我不明白該怎麼做。我編寫了代碼來記錄進度,但不知道如何啓動下載。
注意:這些文件是不同的類型。
在此先感謝。
JS
// Downloading of files
filelist.on('click', '.download_link', function(e){
e.preventDefault();
var id = $(this).data('id');
$(this).parent().addClass("download_start");
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
// Handle Download Progress
xhr.addEventListener("progress", function (evt) {
if(evt.lengthComputable) {
var percentComplete = evt.loaded/evt.total;
console.log(percentComplete);
}
}, false);
return xhr;
},
complete: function() {
console.log("Request finished");
}
})
});
HTML和PHP
<li>
<div class="f_icon"><img src="' . $ico_path . '"></div>
<div class="left_wing">
<div class="progressbar"></div>
<a class="download_link" href="#" id="'.$file_id.'"><div class="f_name">' . $full_file_name . '</div></a>
<div class="f_time_size">' . date("M d, Y", $file_upload_time) . ' • ' . human_filesize($file_size) . '</div>
</div>
<div class="right_wing">
<div class="f_delete">
<a class="btn btn-danger" href="#" aria-label="Delete" data-id="'.$file_id.'" data-filename="'.$full_file_name.'"><i class="fa fa-trash-o fa-lg" aria-hidden="true" title="Delete this?"></i>
</a>
</div>
</div>
</li>
你怎麼送你下載到用戶的文件嗎? –
如果你問我如何下載文件,那麼這就是我想知道我應該如何下載文件。 – Ayan
它看起來像你問如何顯示進度,但在第二次閱讀,這是一個額外的下載。簡單的答案:不要使用ajax來下載文件,使用瀏覽器。 'download' –