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 可以代表某一个指定的 https://developer.mozilla.org/zh-CN/docs/DOM/File 对象或 https://developer.mozilla.org/zh-CN/docs/DOM/Blob 对象.
语法
objectURL = window.URL.createObjectURL(blob);
blob 参数是一个 https://developer.mozilla.org/zh-CN/docs/DOM/File 对象或者 https://developer.mozilla.org/zh-CN/docs/DOM/Blob 对象.
objectURL 是生成的
对象 URL. 通过这个 URL, 可以获取到所指定文件的完整内容.
示例
查看使用对象 URL 显示图片 https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images .
附注
在每次调用 createObjectURL() 方 法的时候, 都会创建一个新的对象 URL, 即使参数中的这个对象已经有了自己的对象 URL. 在你不需要这些对象 URL 的时候, 你应该通过调用
window.URL.revokeObjectURL()
https://developer.mozilla.org/zh-CN/docs/DOM/window.URL.revokeObjectURL 方法来释放它们所占用的内容. 虽然即使你不主动释放它们, 浏览 器也会在当前文档被卸载的时候替你释放, 不过, 考虑到更好的性能和更少的内存占用, 你应该在安全的时候主动施放它们.
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 8 | 4 | 10 | 12 | Nightly build |
来源: https://www.cnblogs.com/stephenykk/p/3558887.html