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代码

跪谢啊~~~~~~~~~~~

...全文

213 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