zoukankan      html  css  js  c++  java
  • createObjectURL方法 实现本地图片预览

    ie6 可以直接显示本本地路径的图片 如: <img src="file://c:/3.jpg" />  ~~~网上都说ie7就不支持这种文件系统路径的url,但测试 xp ie8还是可以的

    ie8+ alphaImageLoader滤镜方式加载本地路径的图片

    chrome, firefox, 用dataUrl  或 createObjectURL方法实现

    例子:

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>get file input full path</title>
        <script type="text/javascript" language='javascript'>
            function getFullPath(obj) {
                var newPreview = document.getElementById("img");
                if (obj) {
                    //ie
                    if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                        obj.select();
                        newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";
                        newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;
    
                        return;
                    }
                    //firefox
                    else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                        if (obj.files) {
                            newPreview.src = window.URL.createObjectURL(obj.files.item(0));
    
                            return;
                        }
                        newPreview.src = obj.value;
    
                        return;
                    }
                    newPreview.src = obj.value;
    
                    return;
                }
            }
        </script>
    </head>
    <body>
        <input type="file" onchange="getFullPath(this);" />
        <img id="img" alt="" style="200px; height:200px;" src="你自己的透明图片"/>
    </body>
    </html>
  • 相关阅读:
    20151104内置对象
    20151102adonet2
    20151029adonet1
    20151028c#4
    20151027c#3
    20151026c#2
    20151021c#1
    20151020sql2
    20151019sql1
    Codeforces Round #261 (Div. 2) C. Pashmak and Buses(思维+构造)
  • 原文地址:https://www.cnblogs.com/iroading/p/11077090.html
Copyright © 2011-2022 走看看