В основном я пытаюсь загрузить файл (около 10 МБ) и показать процент прогресса на странице для прогресса загрузки.Я не могу использовать обычный атрибут html download = "filename.jpg", потому что файл не размещен в том же домене.Chrome больше не будет разрешать загрузку между доменами.Мой обходной путь для этого - загрузка и загрузка файла как объекта BLOB через javascript.У меня это работает, но мне нужно найти способ получить процент прогресса загрузки и отобразить его на странице или console.log (прогресс).У меня есть прикрепленный код.Если бы кто-то мог помочь мне в этом, я был бы признателен.
#downloadButton {
background:#000;
color:#FFF;
padding:10px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="downloadButton">
Click here to download file
</div>
<script>
function forceDownload(blob, filename) {
var a = document.createElement('a');
a.download = filename;
a.href = blob;
a.click();
}
// Current blob size limit is around 500MB for browsers
function downloadResource(url, filename) {
if (!filename) filename = url.split('\\').pop().split('/').pop();
if (url.indexOf(".zip") !== -1 || url.indexOf(".rar") !== -1) {
$("#downloadButton").removeClass("loading");
forceDownload(url, filename);
} else {
fetch(url, {
headers: new Headers({
'Origin': location.origin
}),
mode: 'cors'
})
.then(response => response.blob())
.then(blob => {
let blobUrl = window.URL.createObjectURL(blob);
$("#downloadButton").removeClass("loading");
forceDownload(blobUrl, filename);
})
.catch(e => {
$("#downloadButton").removeClass("loading");
$("#downloadButton").addClass("error");
console.error(e);
});
}
}
$("#downloadButton").click(function() {
$("#downloadButton").addClass("loading");
$('<div id="notification"><span>Starting download...</span></div>').prependTo('body');
setTimeout(function() {$("#notification").fadeOut()}, 6000);
downloadResource("https://share.dmca.gripe/a7Bcp5j4zSRL9WIV.m4a","audio.m4a");
});
//]]>
</script>