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" "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显示图片 js生成图片预览图后 生成缩略图 然后上传缩略图图片
附注
在每次调用createObjectURL()方 法的时候,都会创建一个新的对象URL,即使参数中的这个对象已经有了自己的对象URL.在你不需要这些对象URL的时候,你应该通过调用 window.URL.revokeObjectURL()方法来释放它们所占用的内容.虽然即使你不主动释放它们,浏览 器也会在当前文档被卸载的时候替你释放,不过,考虑到更好的性能和更少的内存占用,你应该在安全的时候主动施放它们.
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 8 | 4 | 10 | 12 | Nightly build |
相关文章
- javascript生成缩略图后上传并利用canvas重绘(2014-5-16 14:37:41)
- 对话《JavaScript高级程序设计》作者Nicholas C. Zakas(2014-5-4 11:30:35)
- js和html5(canvas)实现手机端刮刮卡抽奖效果完美兼容android/IOS/PC(2014-4-15 12:22:43)
- 丰富直观的设计 用户体验设计中的巧妙过渡(2014-2-13 14:11:10)
- m3u8是什么？单码/多码率适配流 m3u8最适合CDN来分发 m3u8可以做切片文件 HTML5 Video播放视频格式(2014-2-10 16:12:45)
- 移动Web前端优化总结(2013-11-30 15:8:27)
- html5里的datauri优缺点以及浏览器支持情况(2013-11-29 16:19:26)
- 缓存多个DataURI资源 摆脱CSS Sprites图片背景位置的约束(2013-11-29 15:5:46)
- appcan和phonegap的区别(2013-9-9 10:2:44)
- [分享]必须知道的七个HTML5新特性(2013-7-24 14:44:56)
