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实现可拖动进度条实例代码
Jun 21 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
提升Python程序运行效率的6个方法
2015/03/31 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
幼儿园儿童节主持词
2014/03/21 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
生日祝酒词大全
2015/08/10 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL