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 ...
随机推荐
- c语言各类问题 代码
定义一个结构体,有两个成员变量,一个整型的n,一个字符型的c,利用结构体类型声明一个具有5个元素的数组,并随机初始化,根据成员变量n进行从小到大排序,然后输出 冒泡排序然后 在输出结构体#includ ...
- 隐藏nginx 版本号信息(转)
为了安全,想将http请求响应头里的nginx版本号信息隐藏掉: 1. nginx配置文件里增加 server_tokens off; server_tokens作用域是http server loc ...
- Phone List(字典树)
Phone List Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 25709 Accepted: 7785 Descr ...
- Runtime.exec使用错误导致延迟.md
这篇文章是纪录了一个bug解决的过程,可是我还是没有可以真正地找出bug的缘由.希望大牛可以详解. 问题的发现 当接触的系统越来越大的时候,对于系统的性能越来越高的时候,找到表面问题的真正原因就慢慢地 ...
- HDU - 2276 Kiki & Little Kiki 2
Description There are n lights in a circle numbered from 1 to n. The left of light 1 is light n, and ...
- openstack之Nova
一.Nova简介及其核心组件: Nove在openstack中提供计算服务: Nova核心模块: Controller Nova-api:提供API,包括命令行API; Nova-schedule: ...
- 在Tableau中自定义版块地图 (Polygon)
在Tableau的地图报表中有一个‘Filed Map’的类型,可以根据版块来显示数据. 但实际应用中Tableau固有的版块划分可能不是我们想要的,下面介绍如何自定义版块并且用作数据分析. 自定义版 ...
- Xcode Could not load NIB 的一个问题解决
# Could not load NIB 的一个问题 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pr ...
- KMP算法的一个C++实现
本文参考阮一峰老师的KMP算法,重点是“部分匹配表”的建立.算法可参考 http://kb.cnblogs.com/page/176818/ . /* * kmp.cpp * Author: Qian ...
- Median of Two Sorted Arrays-分治法
题目意思很简单将两个有序数组合并之后的中位数找出来.题目要求使用log(m+n)的时间复杂度来做. 虽然言简意赅,但不得不承认这个题目我自己想了好久也没做出来,隐约觉得应该使用寻找第k大数的算法来做, ...