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 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
对python调用RPC接口的实例详解
2019/01/03 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
Python with语句用法原理详解
2020/07/03 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
世界读书日的活动方案
2014/08/20 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
服务明星事迹材料
2014/12/29 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技