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>
  • 相关阅读:
    JS标签获取另一个页面传过来的href值
    jsp/servlet实现简单上传和下载
    servlet跳转页面后图片不显示
    Nginx 配置实例-动静分离
    将博客搬至博客园
    nginx 配置实例-反向代理
    Nginx 简介与安装、常用的命令和配置文件
    nginx 配置实例-负载均衡
    nginx 配置实例-反向代理
    Nginx 简介与安装、常用的命令和配置文件
  • 原文地址:https://www.cnblogs.com/iroading/p/11077090.html
Copyright © 2011-2022 走看看