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

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

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

例子：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.     <title>get file input full path</title>
  6.     <script type="text/javascript" language='javascript'>
  7.         function getFullPath(obj) {
  8.             var newPreview = document.getElementById("img");
  9.             if (obj) {
  10.                 //ie
  11.                 if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
  12.                     obj.select();
  13.                     newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";
  14.                     newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;
  15.  
  16.                     return;
  17.                 }
  18.                 //firefox
  19.                 else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
  20.                     if (obj.files) {
  21.                         newPreview.src = window.URL.createObjectURL(obj.files.item(0));
  22.  
  23.                         return;
  24.                     }
  25.                     newPreview.src = obj.value;
  26.  
  27.                     return;
  28.                 }
  29.                 newPreview.src = obj.value;
  30.  
  31.                 return;
  32.             }
  33.         }
  34.     </script>
  35. </head>
  36. <body>
  37.     <input type="file" onchange="getFullPath(this);" />
  38.     <img id="img" alt="" style="width:200px; height:200px;" src="你自己的透明图片"/>
  39. </body>
  40. </html>
  41.

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

window.URL.createObjectURL

概述

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

语法

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

示例

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

附注

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

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 8 4 10 12 Nightly build

createObjectURL方法 实现本地图片预览的更多相关文章

  1. [转] createObjectURL方法 实现本地图片预览

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

  2. Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案

    Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成  ...

  3. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

  4. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  5. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  6. js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 自定义type为file型input控件+该控件具有本地图片预览功能

    最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...

  8. js本地图片预览

    相信大家都遇到过上传图片之前预览,网上找了很多,但都不是所有浏览器都支持,不过后来找到一个,但自己没有完全实验. 代码如下: <script> //使用IE条件注释来判断是否IE6,通过判 ...

  9. 利用js加载本地图片预览功能

    直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safa ...

随机推荐

  1. tomcat应用转到weblogic上时的问题

    昨天将一个tomcat环境下调试通过的报表demo应用发布到weblogic上做测试,结果发现好多问题.总结了一下,主要有这么几点: 1.使用log4j的问题. tomcat应用直接发布到weblog ...

  2. mget 同时获取

    mget 同时获取: http://192.168.32.81:9200/ _mget POST { "docs" :[ { "_index":"li ...

  3. OpenCV之Python学习笔记

    OpenCV之Python学习笔记 直都在用Python+OpenCV做一些算法的原型.本来想留下发布一些文章的,可是整理一下就有点无奈了,都是写零散不成系统的小片段.现在看 到一本国外的新书< ...

  4. HDOJ 1429 胜利大逃亡(续) (bfs+状态压缩)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1429 思路分析:题目要求找出最短的逃亡路径,但是与一般的问题不同,该问题增加了门与钥匙约束条件: 考虑 ...

  5. 【剑指offer】调整数组顺序

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/25829395 剑指offer上的第14题,九度OJ为了确保输出的结果的唯一性,在输出上做了 ...

  6. Spark调研笔记第2篇 - 怎样通过Sparkclient向Spark提交任务

    在上篇笔记的基础上,本文介绍Sparkclient的基本配置及Spark任务提交方式. 1. Sparkclient及基本配置 从Spark官网下载的pre-built包中集成了Sparkclient ...

  7. iOS开发之第三方登录QQ -- 史上最全最新第三方登录QQ方式实现

    项目地址 :  https://github.com/zhonggaorong/QQLoginDemo/tree/master 最新版本的qq登录实现步骤实现: 1. 首先,你需要去向腾讯申请账号. ...

  8. js得到分页栏

    自己写的,感觉返回html代码蠢蠢的,但是新手并不知道怎么写更好的,感觉这样子也蛮简单.记录下来,以后来越改越好. //获得分页栏.注意indexSize为奇数,这样也比较好看 //totalNum: ...

  9. C++改变编程入口为main函数

    1, 你用vc建了一个控制台程序,它的入口函数应该是main, 而你使用了WinMain. 2.  你用vc打开了一个.c/.cpp 文件,然后直接编译这个文件,这个文件中使用了WinMian而不是m ...

  10. Joel在耶鲁大学的演讲

    Joel Spolsky是一个美国的软件工程师,他的网络日志"Joel谈软件"(Joel on Software)非常有名,读者人数可以排进全世界前100名. 上个月28号,他回到 ...