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中map函数的两种方式
Apr 07 jQuery
Jquery-data的三种用法
Apr 18 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jquery分页优化操作实例分析
Aug 23 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
消息持续发送的完整例子
2006/10/09 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
JavaScript的目的分析
2007/01/05 Javascript
JavaScript对象模型-执行模型
2008/04/28 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
python hook监听事件详解
2018/10/25 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
美国购车网站:TrueCar
2016/10/19 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
暑期研修感言
2014/02/17 职场文书
建筑学专业自荐书
2014/07/09 职场文书
六一活动主持词
2015/06/30 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL