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="width: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()方法来释放它们所占用的内容.虽然即使你不主动释放它们,浏览 器也会在当前文档被卸载的时候替你释放,不过,考虑到更好的性能和更少的内存占用,你应该在安全的时候主动施放它们.

浏览器兼容性

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. Awk 命令学习总结、AWk命令系列学习（linux shell)

    AWK基本语法 下面没有提到awk命令怎么使用了,你可以通过 运行:awk –h 查询到所有命令及参数!下面把awk作为一门语言分节介绍. linux awk 内置变量使用介绍   awk语言中,怎么 ...

  2. 设计模式C++学习笔记之二（Proxy代理模式）

      代理,一看名字就知道这只是个中介而已,真实的执行者在代理的后面呢.cbf4life在他的书里提的例子也很有趣,更详细的内容及说明可以参考原作者博客:cbf4life.cnblogs.com.现在贴 ...

  3. html常用标签表单和表格等及css的简单入门

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 基于官方mysql镜像构建自己的mysql镜像

    参考文章:https://www.jb51.net/article/115422.htm搭建步骤 1.首先创建Dckerfile: 1 2 3 4 5 6 7 8 9 10 11 12 FROM my ...

  5. oracle里面用sql做报表并带小计合计常用到的函数

    1-- DECODE函数是Oracle PL/SQL是功能强大的函数之一,假设我们想给职员加工资,其标准是:工资在8000元以下的将加20%:工资在8000元以上的加15%,通常的做法是,先选出记录 ...

  6. Codeforces 833D Red-Black Cobweb [点分治]

    洛谷 Codeforces 思路 看到树上路径的统计,容易想到点分治. 虽然只有一个限制,但这个限制比较麻烦,我们把它拆成两个. 设黑边有\(a\)条,白边有\(b\)条,那么有 \[ 2a\geq ...

  7. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

  8. swift 实践- 02 -- 自定义cell 的简单使用

    import UIKit class MyTableViewCell: UITableViewCell { var imageV: UIImageView? var titleLabel: UILab ...

  9. swift 学习- 23 -- 扩展

    // 扩展 就是为一个已有的 类, 结构体, 枚举, 或者 协议类型添加新功能, 这包括在没有权限获取 原始代码的情况下 扩展类型的能力 (即 逆向建模), 扩展和 OC 中的分类类似, (与 OC ...

  10. 在多任务（RTOS）环境中使用看门狗

    最近在SEGGER的博客上看到一篇有关在实时操作系统使用看门狗的文章.从一个失败的太空项目出发,分析了看门狗的作用及使用,自我感觉很有启发,特此翻译此文并推荐给各位同仁.为了阅读方便,有些航天领域名词 ...