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="width:200px; height:200px;" src="你自己的透明图片"/>
</body>
</html>
然后 我们来看看 window.URL.createObjectURL() 到底是什么
window.URL.createObjectURL
创建一个新的对象URL,该对象URL可以代表某一个指定的File
对象或Blob
对象.
语法
objectURL = window.URL.createObjectURL(blob);
示例
查看使用对象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方法 实现本地图片预览的更多相关文章
- [转] createObjectURL方法 实现本地图片预览
ie6 可以直接显示本本地路径的图片 如: <img src="file://c:/3.jpg" /> ~~~网上都说ie7就不支持这种文件系统路径的url,但测试 ...
- Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案
Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成 ...
- 浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
- 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...
- js本地图片预览代码兼容所有浏览器
html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...
- js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 自定义type为file型input控件+该控件具有本地图片预览功能
最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...
- js本地图片预览
相信大家都遇到过上传图片之前预览,网上找了很多,但都不是所有浏览器都支持,不过后来找到一个,但自己没有完全实验. 代码如下: <script> //使用IE条件注释来判断是否IE6,通过判 ...
- 利用js加载本地图片预览功能
直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safa ...
随机推荐
- $.ajax和vue-resource实现OAuth
Vue.js——使用$.ajax和vue-resource实现OAuth的注册.登录.注销和API调用 概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST A ...
- CI 模板解析器类
模板解析器类可以解析你的视图文件中的伪变量.它可以解析简单的变量或者以变量作为标签的结构.如果你以前没有用过模板引擎,那么伪变量如下所示: <html><head><ti ...
- HDU 1000 A + B Problem
#include int main() { int a,b; while(scanf("%d%d",&a,&b)!=EOF) printf("%d\n&q ...
- Poj 2371 Questions and answers(排序)
题目链接:http://poj.org/problem?id=2371 思路分析:使用计数排序或其他时间复杂度为O( log N )的排序. 代码如下: #include <iostream&g ...
- Flex4 设置combobox选项不可编辑
近日做数据的增删改查,使用的flex4的ComboBox控件---> flex4中ComboBox其实就是TextInput的叠加 flex3中ComboBox其实就是Label的叠加 开始是使 ...
- CF 459A(Pashmak and Garden-正方形给出2点求2点)
A. Pashmak and Garden time limit per test 1 second memory limit per test 256 megabytes input standar ...
- 基于RYU控制器(controller)上的simple-switch 的APP做的測试-SDN/OpenFlow
近期一直在学习RYU控制器,在使用的过程中,发现有下面几方面的长处:RYU控制器全然使用Python语言编写,在理解起来和上手速度上是挺快的:RYU控制器的总体架构清晰明了,在日后有时间我会整理一个关 ...
- 也谈.NET MVC 2 + ExtJS的部署问题
由于业务需要,笔者刚进到一个项目组,由于没有美工,前台采用ExtJs + MVC 2 ,迭代1的项目做的还算比较顺利,至少在本机上是运行没有任何问题的, 但是为了给客户演示,我兴高采烈的将网站部署在I ...
- mysql 中的 IF 和 IFNULL 用法
IFNULL(expr1,expr2) 如果expr1不是NULL,IFNULL()返回expr1,否则它返回expr2.IFNULL()返回一个数字或字符串值,取决于它被使用的上下文环境. IF(S ...
- FreeCodeCamp:Title Case a Sentence
要求: 确保字符串的每个单词首字母都大写,其余部分小写. 像'the'和'of'这样的连接符同理. 结果: titleCase("I'm a little tea pot") 应该 ...