createObjectURL方法 实现本地图片预览
2014-02-21 10:01
204 查看
ie6 可以直接显示本本地路径的图片 如: <img src="file://c:/3.jpg" /> ~~~网上都说ie7就不支持这种文件系统路径的url,但测试 xp ie8还是可以的
ie8+ alphaImageLoader滤镜方式加载本地路径的图片
chrome, firefox, 用dataUrl 或 createObjectURL方法实现
例子:
然后 我们来看看 window.URL.createObjectURL() 到底是什么
创建一个新的对象URL,该对象URL可以代表某一个指定的
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 |
相关文章推荐
- 纯JS实现本地图片预览的方法
- readAsDataUrl()方法实现预览图片效果
- getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
- getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
- HTML使用FileReader对象的readAsDataURL()方法实现图片的上传预览效果
- 纯JS实现本地图片预览的方法
- 用ASP.NET实现下载远程图片保存到本地的方法 保存抓取远程图片的方法
- js前端实现多图图片上传预览的两个方法
- 纯AS代码实现可预览本地图片的flash上传客户端(as3.0)
- js实现上传图片预览的方法
- [AS3]纯AS代码实现可预览本地图片的flash上传客户端[转]
- js实现canvas保存图片为png格式并下载到本地的方法
- ASP.NET 实现通过URL 获取远程的图片或者文件方法
- Android开发之下载服务器上的一张图片到本地java代码实现HttpURLConnection
- php实现异步将远程链接上内容(图片或内容)写到本地的方法
- easyui学习:datagrid显示图片并预览的实现方法
- js实现文件上传,图片本地预览(部分代码是借鉴的)
- 图片上传时实现本地预览功能的原理解析
- 原生javascript FileReader对象实现图片上传本地预览效果
- 实现本地图片预览上传的功能