前端异步请求获取图片下载_前端下载图片异步

作者：小蓝xlanll | 2024-03-02 00:49:24

踩

前端下载图片异步

前端主要部分

$(document).ready(function(){

$("#cardImg").on('click', function(){
const xhr = new XMLHttpRequest();
var url = 'getImg.action';
var param ='path='+ $(this).attr("url");
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xhr.responseType = 'blob';
xhr.onload = function(){
if (xhr.status === 200) {
//将图片文件用浏览器中下载
saveAs(xhr.response, "cardImg.jpg");
}
};
xhr.send(param);
});
$("#cardImgBack").on('click', function(){
const xhr = new XMLHttpRequest();
var url = 'getImg.action';
var param ='path='+ $(this).attr("url");
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xhr.responseType = 'blob';
xhr.onload = function(){
if (xhr.status === 200) {
//将图片文件用浏览器中下载
saveAs(xhr.response, "cardImgBack.jpg");
}
};
xhr.send(param);
});

});

</script>

<body>

<a id = 'cardImg' href= 'javascript:void(0);'
url='图片相对路径'

>下载</a>

<a id = 'cardImgBack' href= 'javascript:void(0);'
url='图片相对路径'

>下载</a>

</body>

服务端

getImg.action实现主要部分

public String execute() throws Exception {
ServletOutputStream out = null;
String fileServer = “可以访问图片的域名或路径”；
String imgPath = request_.getParameter("path");
try {
//获取图片存放路径
String imgUrl = fileServer + imgPath;
log.info("图片真实路径： "+ imgUrl);
URL url = new URL(imgUrl);
SslUtils.ignoreSsl();
HttpURLConnection conn = (HttpURLConnection)url.openConnection();
conn.setRequestMethod("GET");
conn.setConnectTimeout(5 * 1000);
InputStream input = conn.getInputStream();//通过输入流获取图片数据
response_.setContentType("multipart/form-data");
out = response_.getOutputStream();
//读取文件流
int len = 0;
byte[] buffer = new byte[1024 * 10];
while ((len = input.read(buffer)) != -1){
out.write(buffer,0,len);
}
out.flush();
}catch (Exception e){
e.printStackTrace();
}finally {
if (out != null) {
out.close();
}
}
return null;
}

struts.xml 配置

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/177958

前端异步请求获取图片下载_前端 下载图片异步

前端异步请求获取图片下载_前端下载图片异步