javascript - 同名的 Ajax 文件下载

问题描述

这是我的小提琴：https ://jsfiddle.net/e6b5hdow/2/

const links = document.querySelectorAll('[href$=".jpg"], [href$=".png"], [href$=".mp4"], [href$=".avi"], [href$=".jpeg"], [href$=".mkv"], [href$=".csv"]');
links.forEach(link => link.classList.add('download-button'));


$('.name').prepend($("<div class='download-ui-container'><div class='start-download'>Starting Download..</div><div class='download-progress-container'><div class='download-progress'></div></div><a class='save-file'>Save File</a></div>"));


var _OBJECT_URL;

$(document).on('click', '.download-button', function(event) {
  var request = new XMLHttpRequest();
  fileDownload = $(this).attr('href');
  var _t = $(this);
  request.addEventListener('readystatechange', function(e) {
    if (request.readyState == 2 && request.status == 200) {
      _t.parents('td').find('.start-download').css('display', 'block');
      _t.parents('td').find('.download-button').hide();
    } else if (request.readyState == 3) {
      _t.parents('td').find('.download-progress-container').css('display', 'block');
      _t.parents('td').find('.start-download').hide()
    } else if (request.readyState == 4) {
      _OBJECT_URL = URL.createObjectURL(request.response);

      var fileName = fileDownload.split("/")
      fileName = fileName[fileName.length - 1]

      var downloadLink = document.createElement('a');
      console.log(downloadLink);
      downloadLink.href = _OBJECT_URL;
      downloadLink.download = fileName;

      // document.body.appendChild(downloadLink);
      downloadLink.click();
      _t.parents('td').find('.download-button').css('display', 'block');
      _t.parents('td').find('.download-progress-container').hide();
      _t.parents('td').find('.save-file').click();
      setTimeout(function() {
        window.URL.revokeObjectURL(_OBJECT_URL);

        _t.parents('td').find('.download-button').css('display', 'block');
        _t.parents('td').find('.save-file').css('display', 'hide');
      }, 60 * 1000);
    }
  });
  request.addEventListener('progress', function(e) {
    var percent_complete = (e.loaded / e.total) * 100;
    _t.parents('td').find('.download-progress').css('width', percent_complete + '%');
  });
  request.responseType = 'blob';
  request.open('get', fileDownload);
  request.send();
  return false;
});

.demo-container {
  width: 400px;
  margin: 60px auto;
}

.download-button {
  background-color: white;
  color: #2980b9;
  border: 2px solid #2980b9;
  font-family: inherit;
  outline: none;
  min-width: 100px;
  padding: 10px;
  font-size: inherit;
  border-radius: 2px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.start-download {
  text-align: center;
  display: none;
}

.download-progress-container {
  border: 1px solid #cccccc;
  padding: 4px;
  display: none;
  height: 20px;
}

.download-progress {
  background-color: #2980b9;
  display: inline-block;
  height: 100%;
}

.save-file {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<table>
  <tr>
    <td class="name">
      <a href="https://upload.wikimedia.org/wikipedia/commons/9/9b/Sternwarte_Darmstadt_HDR_Panorama_10MB_-_Photographed_by_James_Breitenstein.jpg">First link, large file</a>
    </td>
  </tr>
  <tr>
    <br><br><br>
    <td class="name">
      <a href="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg">Second link small file</a>
    </td>
  </tr>
</table>

在这里，我尝试使用 Ajax 下载文件并显示进度条。它工作得很好，但有一个问题。

如果第一个链接文件很大，第二个链接文件很小。

然后如果有人点击第一个链接并且文件开始下载并且

然后立即点击第二个链接和文件下载，因为尺寸小，第一个链接文件仍在下载。

第一个链接点击文件下载后，与第二个文件名的文件一起保存。

重现步骤：

单击第一个链接单击第二个链接如果先下载第二个链接文件，则第一个链接文件的名称与第二个文件链接的名称相同

我认为，当我再次调用该函数时，该filename变量会被覆盖。

是否可以使用请求标头而不是文件名？

基本上，我需要的是。

一种防止变量名被覆盖的方法，当一个函数被不同的参数调用两次时，第一次调用的函数执行时间较长，第二次调用的函数执行时间在1秒内。

标签： javascriptjquery

javascript - 同名的 Ajax 文件下载

问题描述

解决方案

推荐阅读