如何使用 JavaScript 从 DOM 获取 FileType？答案

【问题标题】：How to get FileType from a DOM with JavaScript?如何使用 JavaScript 从 DOM 获取 FileType？
【发布时间】：2016-06-21 07:05:33
【问题描述】：

这是一个这样的 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？

【问题讨论】：

看来，这个脚本获取的是 url-string 数据而不是 img-data。我认为 FileReader 只能从本地读取文件。
“看来，这个脚本获取的是url-string数据而不是img-data。我认为FileReader只能从本地读取文件。”很好奇@的目的是什么987654333@ 是？您可以使用XMLHttpRequest() 将图像检索为Blob，然后使用FileReader() 和response 中的response 作为.readAsDataURL() 的参数；请参阅plnkr.co/edit/To4uZXL8PUph9qG3azvZ?p=preview 或使用response.type
在 plnkr plnkr.co/edit/To4uZXL8PUph9qG3azvZ?p=preview 查看版本 2，使用 XMLHttpRequest() .response.type.split("/")[1] ，其中 .response 是从图像请求返回的 Blob，而不是 FileReader()
你是对的。我的 Blob([url]) 不是正确的 Blob。我才意识到。
什么是url？您是否将img src 作为url 传递给new Blob([url])？

标签： javascript image download file-type

【解决方案1】：

您可以使用XMLHttpRequest() 并将.responseType 设置为"blob" 来请求图像文件； blob.type.split("/")[1] 其中type 是MIME 类型的Blob，.split() 之后的[1] 将是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()
  }

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

【讨论】：

【解决方案2】：

您确定new Blob([url]) 会返回带有图像内容的 blob 吗？不是包含此内容的文本文件http://192.168.1.100/Image_tmp/2016-06/d4eb8d？

据我所知，您只能通过使用 XHR => How to get a file or blob from an object URL?

将图像链接转换为 blob

然后当你有 blob 时，从 blob.type 获取文件类型。并附加扩展名

var ext ="";
switch(blob.type){
   case "image/jpeg":
        ext=".jpg";
        break;
   case "image/png":
        ext=".png";
        break;
   case "image/gif":
        ext=".gif";
        break;
}
aLink.download = fileName + ext;

【讨论】：

好的，你是对的。终于有人可以帮我纠正我的错误了。

【解决方案3】：

您有一个 HTMLImageElement 的实例，据我从文档中得知，它没有任何图像类型的属性。

您可以获取 URL，启动 AJAX 调用并获取 Content-Type 标头，从中可以轻松找出文件扩展名...假设远程服务器提供信息（如果没有，你有一个不同的问题）。 XMLHttpRequest 对象有一个 .getResponseHeader() 方法。

你有穷人的解决方案，将window.location 更改为图片 URL，但当然没有办法强制下载。

最后但同样重要的是，您可以构建一个小的服务器端脚本，将文件下载到服务器上并准备所有细节。

【讨论】：