图像不自带扩展名下载 [英] image does not download with it's own extension
本文介绍了图像不自带扩展名下载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经使用下面的代码来下载具有给定名称的图像。但是，这似乎并没有使用自己的图像扩展名下载图像。
I have used below code to download image with given name. But this seems does not download image with it's own image extension.
这里是HTML
<a id="btnDownload" href="www.mywebsite.com/images/myimage.jpg" onClick="downloadImage(www.mywebsite.com/images/myimage.jpg);" >download</a>
和代码
function downloadImage(sUrl){
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open('GET', sUrl, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
var res = xhr.response;
var blob = new Blob([res], {type:'image'});
url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
a.download = "My image name";
document.body.appendChild(a);
a.click();
};
xhr.send();
}
我想要的是我想要下载的图像与我的图像名称。延期。这里的图像确实有像jpeg，png，gif这样的替代扩展。
但是这个代码总是下载没有扩展名的文件。任何更改在这里？
What i want is i want downloaded image with "My image name"."extension". Here image does have alternative extension like jpeg, png, gif. But this code always download file without extension. Any changes here?
推荐答案
要获取扩展名在你的例子你可以做：
To get the extension in your example you could do:
a.download = "My image Name." + window.URL.split('.').pop();
然而，我会使用不同的数据属性：
Yet I would work with different data-attributes:
<html>
<!--
You can put the href and the name you want to see in different data attributes.
Also one can add IE support.
-->
<head>
<script>
//e:=<a [data-name] [data-href]>
function downloadMe(e){
var tF = e.getAttribute('data-name');
var tURL = e.getAttribute('data-href')
var tR = new XMLHttpRequest();
tR.open('GET', tURL, true);
tR.responseType = 'blob';
tR.onload = function(e){
var tB = this.response;
if(window.top.navigator.msSaveOrOpenBlob){
//Store Blob in IE
window.top.navigator.msSaveOrOpenBlob(tB, tF)
}
else{
//Store Blob in others
var tA = document.body.appendChild(document.createElement('a'));
tA.href = URL.createObjectURL(tB);
tA.download = tF;
tA.style.display = 'none';
tA.click();
tA.parentNode.removeChild(tA)
}
};
tR.send();
return false
}
</script>
</head>
<body>
<a href = '#' data-href = 'A.png' data-name = 'My Name.png' onclick = 'return downloadMe(this)'>download</a>
</body>
</html>
这篇关于图像不自带扩展名下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
