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()方法来释放它们所占用的内容.虽然即使你不主动释放它们,浏览 器也会在当前文档被卸载的时候替你释放,不过,考虑到更好的性能和更少的内存占用,你应该在安全的时候主动施放它们.
浏览器兼容性
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
© 版权声明
THE END
暂无评论内容