javascript - 如何使用 JavaScript 从 DOM 获取 FileType？

Question

这是一个像这样的 DOM。


<img id="this-is-the-image" src="http://192.168.1.100/Image_tmp/2016-06/d4eb8d">


我需要点击一个按钮，运行一个JS，然后下载这个图像文件。

我已经完成了按钮和下载脚本。

一些代码:

```

function downloadFile(fileName, url) {
        var aLink = document.createElement('a');
        var blob = new Blob([url]);
        var evt = document.createEvent("HTMLEvents");
        getImageType(blob);
        evt.initEvent("click", false, false);
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        aLink.dispatchEvent(evt);
    }

```

我有一个问题。我只能获取src "http://192.168.1.100/Image_tmp/2016-06/d4eb8d"或名称d4eb8d ，但实际上图像是 .png或.jpg 。浏览器可以查看，但是在我save之后传到我的电脑上，文件名变成d4eb8d ，不是d4eb8d.png或d4eb8d.jgp 。如何获取图像的真实类型以便指定 download_name？

Answer 1

您可以使用XMLHttpRequest()与 .responseType设置为"blob"请求图像文件； blob.type.split("/")[1]哪里type是 MIME Blob 的类型, [1]之后.split()将是jpg , jpeg , png或其他图像类型

  window.onload = function() {
    var aLink = document.querySelector("a");
    var fileName = "image";
    var request = new XMLHttpRequest();
    request.responseType = "blob";
    request.open("GET", "http://example.com/d4eb8d");
    request.onload = function() {
    var blob = this.response;
      var type = blob.type.split("/")[1];
      console.log(type);
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", false, false);
      aLink.download = fileName + "." + type;
      aLink.href = URL.createObjectURL(blob); 
      aLink.dispatchEvent(evt);
    }
    request.send()
  }

plnkr http://plnkr.co/edit/To4uZXL8PUph9qG3azvZ?p=preview