Как получить прогресс загрузки для HTML-BLOB с помощью JavaScript - PullRequest
0 голосов
/ 20 ноября 2018

В основном я пытаюсь загрузить файл (около 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...