[英]How to get FileType from a DOM with JavaScript?
Here is a DOM like this. 这是一个这样的DOM。
<img id="this-is-the-image" src="http://192.168.1.100/Image_tmp/2016-06/d4eb8d">
I need to click a button, run a JS, and download this image file. 我需要单击一个按钮,运行JS,然后下载此图像文件。
I have finished the button and the download script. 我已经完成了按钮和下载脚本。
Some code: 一些代码:
``` ```
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);
}
``` ```
I have a problem. 我有个问题。 I can only get the src
"http://192.168.1.100/Image_tmp/2016-06/d4eb8d"
or the name d4eb8d
, but actually the image is .png
or .jpg
. 我只能得到SRC
"http://192.168.1.100/Image_tmp/2016-06/d4eb8d"
还是姓d4eb8d
,但实际上图像.png
或.jpg
。 The brower can view it, but after I save
it to my computer, the file name turn to be d4eb8d
, not d4eb8d.png
or d4eb8d.jgp
. 浏览器可以查看它,但是
save
其save
到计算机后,文件名将变为d4eb8d
,而不是d4eb8d.png
或d4eb8d.jgp
。 How can I get the real type of the image so that I can specify the download_name? 如何获得图像的真实类型,以便可以指定download_name?
You can use XMLHttpRequest()
with .responseType
set to "blob"
to request image file; 您可以使用
XMLHttpRequest()
与.responseType
设置为"blob"
,要求图像文件; blob.type.split("/")[1]
where type
is MIME
type of Blob
, [1]
after .split()
would be jpg
, jpeg
, png
or other image type blob.type.split("/")[1]
,其中type
是Blob
MIME
类型, .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()
}
plnkr http://plnkr.co/edit/To4uZXL8PUph9qG3azvZ?p=preview plnkr http://plnkr.co/edit/To4uZXL8PUph9qG3azvZ?p=预览
Are you sure that new Blob([url])
will return blob with image content? 你确定
new Blob([url])
将返回BLOB与图像内容? not a text file with this content http://192.168.1.100/Image_tmp/2016-06/d4eb8d
? 不是具有此内容的文本文件
http://192.168.1.100/Image_tmp/2016-06/d4eb8d
?
As i know you can turn image link to blob only by read this with XHR => How to get a file or blob from an object URL? 据我所知,您只能通过使用XHR =>阅读此方法将图像链接转换为blob, 如何从对象URL获取文件或blob?
then when you will have blob, get file type from blob.type. 那么当你将有一滴,得到blob.type文件类型。 And attach extension
并附加扩展名
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;
You have an instance of HTMLImageElement and, as far as I can tell from the documentation, it doesn't have any property with the image type. 您有一个HTMLImageElement实例,据我从文档中可以得知,它没有图像类型的任何属性。
You could grab the URL, launch an AJAX call and get the Content-Type
header, from which it should be easy to figure out a file extension... assuming the remote server provides the information (if it doesn't, you have a different problem). 您可以获取URL,启动AJAX调用并获取
Content-Type
标头,从中可以很容易地找到文件扩展名...假设远程服务器提供了信息(如果没有,则您有一个不同的问题)。 The XMLHttpRequest object has a .getResponseHeader() method. XMLHttpRequest对象具有.getResponseHeader()方法。
You algo have the poor-man's solution of changing window.location
to the picture URL but of course there's no way to force a download. 您总是有穷人的解决方案,将
window.location
更改为图片URL,但是当然没有办法强制下载。
Last but not least, you can build a little server-side script that downloads the file on the server and prepares all the details. 最后但并非最不重要的一点是,您可以构建一个小的服务器端脚本,该脚本将文件下载到服务器上并准备所有详细信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.