jquery实现下载图片功能


Posted in jQuery onJuly 18, 2019

本文实例为大家分享了jquery实现下载图片的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
 <style>
 </style>
</head>
 
<body>
 <div class="box">
 <div class="card">
 <img id="testimg1" src="./img/a.jpg"/>
 <a href="javascript:;" class="down_btn_a">点击下载</a>
 </div>
 </div>
 
 
 <script>
 //判断是否为Trident内核浏览器(IE等)函数
 function browserIsIe() {
 if (!!window.ActiveXObject || "ActiveXObject" in window){
  return true;
 }
 else{
  return false;
 }
 }
 //创建iframe并赋值的函数,传入参数为图片的src属性值.
 function createIframe(imgSrc) {
 //如果隐藏的iframe不存在则创建
 if ($("#IframeReportImg").length === 0){
  $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="downloadImg();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
 }
 //iframe的src属性如不指向图片地址,则手动修改,加载图片
 if ($('#IframeReportImg').attr("src") != imgSrc) {
  $('#IframeReportImg').attr("src",imgSrc);
 } else {
  //如指向图片地址,直接调用下载方法
  downloadImg();
 }
 }
 //下载图片的函数
 function downloadImg() {
 //iframe的src属性不为空,调用execCommand(),保存图片
 if ($('#IframeReportImg').src != "about:blank") {
  window.frames["IframeReportImg"].document.execCommand("SaveAs");
 }
 }
 //接下来进行事件绑定
 var aBtn = $(".card .down_btn_a");
 if (browserIsIe()) {
 //是ie等,绑定事件
 aBtn.on("click", function() {
 var imgSrc = $(this).siblings("img").attr("src");
 //调用创建iframe的函数
  createIframe(imgSrc);
 });
 } else {
 aBtn.each(function(i,v){
 //支持download,添加属性.
 var imgSrc = $(v).siblings("img").attr("src");
 $(v).attr("download",imgSrc);
 $(v).attr("href",imgSrc);
 })
 }
 </script>
</body>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
jquery图片预览插件实现方法详解
Jul 18 #jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 #jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
You might like
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Mac安装python3的方法步骤
2019/08/09 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
初中生期末评语大全
2014/04/24 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
公司收款委托书范本
2014/09/20 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
工程催款通知书
2015/04/17 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
追讨欠款律师函
2015/06/24 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Python实现数据的序列化操作详解
2022/07/07 Python