FireFox 7/8 上传前预览图片-优快云博客

//以前是这么做的: var obj = document.getElementById("UploadFile"); var src = ""; if (obj.files) { src = obj.files[0].getAsDataURL(); } else { if((navigator.userAgent.indexOf("MSIE")>0) && (parseInt(navigator.appVersion) >=4))//isIE = true; { obj.select(); //该对象选取 src= document.selection.createRange().text; //返回选取项的文本内容 } } document.getElementById("imgPreview").src=src;

上面的大概只能用于FF6 (<=6), IE 6. 版本变化幻多, 自己去测试吧.

现在混蛋的是, 现在已经无法这样取了.

关于IE7/8, 在本人另一篇文章里,

FF7/8, js预览应该是如此处置.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Image preview example</title> <script type="text/javascript"> oFReader = new FileReader(), rFilter = /^(image\/bmp|image\/cis-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x-cmu-raster|image\/x-cmx|image\/x-icon|image\/x-portable-anymap|image\/x-portable-bitmap|image\/x-portable-graymap|image\/x-portable-pixmap|image\/x-rgb|image\/x-xbitmap|image\/x-xpixmap|image\/x-xwindowdump)$/i; oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; }; function loadImageFile() { if (document.getElementById("uploadImage").files.length === 0) { return; } var oFile = document.getElementById("uploadImage").files[0]; if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } oFReader.readAsDataURL(oFile); } </script> </head> <body onload="loadImageFile();"> <form name="uploadForm" action=""> <table> <tbody> <tr> <td> <img id="uploadPreview" style="" src="http://www.youkuaiyun.com/ui/images/gongshang_logos.gif" alt="Image preview" /> </td> <td> <input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /> </td> </tr> </tbody> </table> </form> </body> </html>

来源: http://archive.cnblogs.com/a/2208869/

--------------------------------------------------------------------------------------------------------------

有一个牛人, 做了一个通用的. http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html

IE的是可行, 但FF不行. 可能是当时版本没有到7.

不过里面设置了一种很强大的模式: remote, 几乎没有什么搞不定的. [ 上传到服务器的内存, 处理完, 再回传显示. ]

在ImagePreview.js , Line 42插入一条语句

ImagePreview.MODE = "remote";

也就是传到服务器上, 再给客户看, 差不多就一切OK了.

JS预览确实是好, 可以节省资源. 可是你能跟得上浏览器的版本变化吗?

IE行的, FF不行, IE6行的, IE7不行, FF6行的, FF7不行. IE, FF搞定了, 还有Chrome, 还有Opera. 不知道, 明天又变出什么花样出来.

--------------------------------------------------------------------------------------------------------------

咸定!