jquery实现下载图片功能

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery实现图片下载代码

    jQuery 实现图片下载代码,供大家参考,具体内容如下 function downloadImage(src) { var $a = $("<a></a>").attr("href", src).attr("download", "meitu.png"); $a[0].click(); } 关键调用downloadImage函数代码 onclick=downloadImage(url) 完整 js 代

  • jquery实现下载图片功能

    本文实例为大家分享了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&quo

  • Unity3D实现批量下载图片功能

    本文实例为大家分享了Unity3D实现批量下载图片功能的具体代码,供大家参考,具体内容如下 下一篇文章试试用线程下载 代码如下 using System.IO; using UnityEngine; using System.Net; using System.Collections; public class Test : MonoBehaviour { private string[] _urls=new string[10]; private string [] _localPath =

  • Python爬虫实现抓取京东店铺信息及下载图片功能示例

    本文实例讲述了Python爬虫实现抓取京东店铺信息及下载图片功能.分享给大家供大家参考,具体如下: 这个是抓取信息的 from bs4 import BeautifulSoup import requests url = 'https://list.tmall.com/search_product.htm?q=%CB%AE%BA%F8+%C9%D5%CB%AE&type=p&vmarket=&spm=875.7931836%2FA.a2227oh.d100&from=mal

  • jQuery实现查看图片功能

    本文实例为大家分享了jQuery实现查看图片的具体代码,供大家参考,具体内容如下 HTML <!-- 放缩略图的div --> <div class="sl"> <img src="images/1.jpg" /> <img src="images/2.jpg" /> <img src="images/3.jpg" /> </div> <!-- 实现

  • jQuery实现下拉框选择图片功能实例

    jQuery实现下拉框选择图片功能实例

    本文实例讲述了jQuery实现下拉框选择图片功能.分享给大家供大家参考.具体如下: 让下拉框中显示图片,并可选择对应图片,让select下拉框不仅可显示文字,还可以显示图片内容.为了更生动些,这里还加入了jQuery动画效果,当展开Select列表的时候,图片渐变显示.使用了一个jQ插件:imageselect.js,使用效果的朋友可以自己下载吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>支持图片选择的jQuery

  • jQuery实现产品对比功能附源码下载

    jQuery实现产品对比功能附源码下载

    产品对比相信大家并不陌生,为了方便用户对类似产品的相关信息进行有效直观的对比,一些电商网站产品或评测网站会为用户提供产品对比的功能,用户只需勾选多个需要对比的产品,就可以进行比对.本文将使用jQuery来给大家讲解如何实现产品对比功能. 查看演示     下载源码 HTML HTML结构我们分三部分,第一是产品列表部分,展示所有可以对比的产品.我们以某手机网站为例,简单的结构,只需展示产品图片和名称,以及一个添加按钮.注意我们把手机的相关参数信息都放在属性data-*里,等会后面展示对比信息的时

  • jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】

    jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】

    本文实例讲述了jQuery实现鼠标滑过商品小图片上显示对应大图片功能.分享给大家供大家参考,具体如下: 1 . 效果截图 2 . 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery图片变换</title> </head> <style type="text/css"

  • asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)

    本文实例讲述了asp.net+jquery.form实现图片异步上传的方法.分享给大家供大家参考,具体如下: 首先我们需要做准备工作: jquery 点击此处本站下载. jquery.form.js 点击此处本站下载. 页面JqueryFormTest.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryFormTest.aspx.cs" Inherits=

  • jQuery+css实现的切换图片功能代码

    jQuery+css实现的切换图片功能代码

    本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <script type="text/javascript" src="jquery.js"></script> <style type="t

  • 基于jquery插件实现拖拽删除图片功能

    基于jquery插件实现拖拽删除图片功能

    本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码,供大家参考,具体内容如下 实现以下效果 完全拖出这个层,图片会消失,否则图片会回到原来的位置 <html> <head> <title></title> <style type="text/css"> #mydiv{ width:900px; background-color:#444; border:1px solid red} #mydiv2{ width

随机推荐