php+html代码实现jpg/jpeg等格式强制性下载怎么实现？

miker2266 2017-11-29 12:20:53


例如：远程文件为http://d.hiphotos.baidu.com/image/h%3D300/sign=e1455acbde3f8794ccff4e2ee21b0ead/728da9773912b31bc351745a8c18367adab4e180.jpg

html代码为：<a href="http://d.hiphotos.baidu.com/image/h%3D300/sign=e1455acbde3f8794ccff4e2ee21b0ead/728da9773912b31bc351745a8c18367adab4e180.jpg">下载原图</a>

提问：如何能实现点击下载原图 就会弹出保存图片的窗口
图片说明

这里强调一下，图片地址为远程地址(⊙o⊙)哦！

恳请各位大神给小的指点指点，js+html或者什么的都可以，但是必须结合html代码

跪谢啊~~~~~~~~~~~
...全文
212 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
miker2266 2017-11-29
  • 打赏
  • 举报
 回复
引用 3 楼 apollokk 的回复:
客户端下载，IE跨域的有问题，最好使用后台下载 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片下载测试</title>
</head>
<body>
    <!--本地图片，IE下载没问题-->
    <img class="qr_img" src="../images/Dgml-logo.gif" download="" />
    <!--跨域图片，IE下载有问题-->
    <img class="qr_img" src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png" download="" />
</body>
</html>
<script src="../Script/jquery-1.7.2.min.js"></script>
<script>
    var timer = null;
    $(".qr_img").bind('click', function () {
        var imgPathURL = this.src;
        if (imgPathURL) {
            oDownLoad(imgPathURL);
        } else {
            alert("图片为空");
        }
    });

    //判断浏览器类型
    function myBrowser() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) {
            return "Opera"
        }; //判断是否Opera浏览器
        if (userAgent.indexOf("Firefox") > -1) {
            return "FF";
        } //判断是否Firefox浏览器
        if (userAgent.indexOf("Chrome") > -1) {
            return "Chrome";
        }
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } //判断是否Safari浏览器
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
            return "IE";
        }; //判断是否IE浏览器
        if (userAgent.indexOf("Trident") > -1) {
            return "Edge";
        } //判断是否Edge浏览器
    }

    //IE浏览器图片保存本地
    function SaveAs5(imgURL) {
        //如果隐藏IFRAME不存在，则添加  
        if (!document.getElementById("IframeReportImg"))
            $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" width="200" height="200" src="about:blank"></iframe>').appendTo("body");
        var iframe = document.getElementById("IframeReportImg");
        iframe.src = imgURL;
        timer = setInterval(DoSaveAsIMG, 100);
    }
    function DoSaveAsIMG() {
        var iframe = document.getElementById("IframeReportImg");
        //如果跨域此处会出错
        try{
            if (iframe.contentDocument.readyState == 'complete') {
                clearInterval(timer);
                iframe.contentWindow.document.execCommand('SaveAs');
            }
        } catch (ex) {
            clearInterval(timer);
            alert('使用IE浏览器下载发生错误，信息如下：\n\n' + ex.message + '\n\n可使用谷歌浏览器或火狐浏览器下载' );
        }
    }
    function oDownLoad(url) {
        var browser = myBrowser();
        if (browser === "IE" || browser === "Edge") {
            SaveAs5(url);
        } else {
            download(url);
        }
    }

    //谷歌，360极速等浏览器下载
    function download(src) {
        var $a = document.createElement('a');
        $a.setAttribute("href", src);
        $a.setAttribute("download", "");

        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
        $a.dispatchEvent(evObj);
    };
</script>
你说的后台下载 是不是php模式下载呀 我这个是帝国的
Hello World, 2017-11-29
  • 打赏
  • 举报
 回复
客户端下载，IE跨域的有问题，最好使用后台下载 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片下载测试</title>
</head>
<body>
    <!--本地图片，IE下载没问题-->
    <img class="qr_img" src="../images/Dgml-logo.gif" download="" />
    <!--跨域图片，IE下载有问题-->
    <img class="qr_img" src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png" download="" />
</body>
</html>
<script src="../Script/jquery-1.7.2.min.js"></script>
<script>
    var timer = null;
    $(".qr_img").bind('click', function () {
        var imgPathURL = this.src;
        if (imgPathURL) {
            oDownLoad(imgPathURL);
        } else {
            alert("图片为空");
        }
    });

    //判断浏览器类型
    function myBrowser() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) {
            return "Opera"
        }; //判断是否Opera浏览器
        if (userAgent.indexOf("Firefox") > -1) {
            return "FF";
        } //判断是否Firefox浏览器
        if (userAgent.indexOf("Chrome") > -1) {
            return "Chrome";
        }
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } //判断是否Safari浏览器
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
            return "IE";
        }; //判断是否IE浏览器
        if (userAgent.indexOf("Trident") > -1) {
            return "Edge";
        } //判断是否Edge浏览器
    }

    //IE浏览器图片保存本地
    function SaveAs5(imgURL) {
        //如果隐藏IFRAME不存在，则添加  
        if (!document.getElementById("IframeReportImg"))
            $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" width="200" height="200" src="about:blank"></iframe>').appendTo("body");
        var iframe = document.getElementById("IframeReportImg");
        iframe.src = imgURL;
        timer = setInterval(DoSaveAsIMG, 100);
    }
    function DoSaveAsIMG() {
        var iframe = document.getElementById("IframeReportImg");
        //如果跨域此处会出错
        try{
            if (iframe.contentDocument.readyState == 'complete') {
                clearInterval(timer);
                iframe.contentWindow.document.execCommand('SaveAs');
            }
        } catch (ex) {
            clearInterval(timer);
            alert('使用IE浏览器下载发生错误，信息如下：\n\n' + ex.message + '\n\n可使用谷歌浏览器或火狐浏览器下载' );
        }
    }
    function oDownLoad(url) {
        var browser = myBrowser();
        if (browser === "IE" || browser === "Edge") {
            SaveAs5(url);
        } else {
            download(url);
        }
    }

    //谷歌，360极速等浏览器下载
    function download(src) {
        var $a = document.createElement('a');
        $a.setAttribute("href", src);
        $a.setAttribute("download", "");

        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
        $a.dispatchEvent(evObj);
    };
</script>
miker2266 2017-11-29
  • 打赏
  • 举报
 回复
引用 1 楼 apollokk 的回复:
http://blog.csdn.net/luckyJieXu/article/details/72137147
能不能给一个详细的demo吖 十分感谢啊 邮箱527103339@qq.com
Hello World, 2017-11-29
  • 打赏
  • 举报
 回复
http://blog.csdn.net/luckyJieXu/article/details/72137147
grub4dos-V0.4.6a-2017-02-04更新
支持 jpg（jpeg，jpe）图像格式。 3.在 vbe 模式，使用 echo -rrggbb 可以显示 216 种彩色样本。 4.使用 echo -v 可以显示版本、内存信息。 5.增加 setmenu 函数，增强图形菜单编辑功能。参数： --ver-on --ver-...
网管教程 从入门到精通软件篇.txt
网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp（2000）的光盘，安装时候选R...JPE，JPEG，JPG：JPEG图形文件 JS：javascript源文件 JSP：HTML网页，其中包含有对一个Java servlet...
FFmpeg4.3系列之31：庖丁解牛之图像格式与压缩原理及实战
FFmpeg系列之31FFmpeg第2季编解码专题之1：庖丁解牛之图像格式与压缩原理及实战 ---------------------------------------- 我将带领大家一起来学习：bmp/png/jpg/gif格式解析与libbmp/libpng/jpeglib/giflib开源库...
png,jpg,jpeg,gif,webp这些图片格式解释一下，分别什么时候用？
本文讲解png,jpg,gif,webp这些图片格式的含义，一般什么时候使用
PHP使用header实现文件下载功能
php文件下载可以使用http的请求头加上php的IO可以实现，很久之前写过这么一个功能，后来代码没了，今天记录一下。5、php的文件下载机制是首先nginx把文件信息读入服务器内存，然后使用请求头把文件二进制信息通过...
CSS

61,112

社区成员

60,732

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章