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

    然后 我们来看看 window.URL.createObjectURL() 到底是什么

    window.URL.createObjectURL

    概述

    创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.

    语法

    objectURL = window.URL.createObjectURL(blob);
    
    • blob参数是一个File对象或者Blob对象.
    • objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.

    示例

    查看使用对象URL显示图片.

    附注

    在每次调用createObjectURL()方 法的时候,都会创建一个新的对象URL,即使参数中的这个对象已经有了自己的对象URL.在你不需要这些对象URL的时候,你应该通过调用 window.URL.revokeObjectURL()方法来释放它们所占用的内容.虽然即使你不主动释放它们,浏览 器也会在当前文档被卸载的时候替你释放,不过,考虑到更好的性能和更少的内存占用,你应该在安全的时候主动施放它们.

    浏览器兼容性

    FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
    Basic support 8 4 10 12 Nightly build
  • 相关阅读:
    Java finally语句到底是在return之前还是之后执行?
    图文介绍openLDAP在windows上的安装配置
    ES之十:ElasticSearch监控工具 cerebro
    ES之八:ES数据库重建索引——Reindex(数据迁移)
    ES index的数据量大于1万的特殊处理场景
    Java中的Hashtable实现方法
    form表单回车提交问题(转)
    ES之九:ES Java客户端Elasticsearch Java client(ES Client 简介、Java REST Client、Java Client、Spring Data Elasticsearch)
    NetBeans 7.0 安装Python插件的方法
    python学习笔记
  • 原文地址:https://www.cnblogs.com/chris-oil/p/8607729.html
Copyright © 2011-2022 走看看