<?xml version="1.0" encoding="gb2312"?> <!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>本地图片预览代码（支持 IE6、IE7、FireFox）</title> <mce:style type="text/css"><!-- #newPreview { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } --></mce:style><style type="text/css" mce_bogus="1">#newPreview { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); }</style> <mce:script type="text/javascript" language="javascript"><!-- function PreviewImg(imgFile) { //IE浏览器 if (window.navigator.userAgent.indexOf("MSIE")>=1) { //新的预览代码，支持 IE6、IE7。 var newPreview = document.getElementById("newPreview"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; newPreview.style.width = "80px"; newPreview.style.height = "60px"; //FireFox浏览器 }else if(window.navigator.userAgent.indexOf("Firefox")>=1) { if(imgFile.files) { /*var newPreview=document.getElementById('newPreview'); //创建img var img=document.createElement("img"); img.setAttribute("src",imgFile.files.item(0).getAsDataURL()); img.setAttribute("width",50); img.setAttribute("height",50); img.setAttribute("id","aPic"); newPreview.appendChild(img); */ //与以上代码同效，上面代码由于是添加到层下，所以浏览一次图片就会增加一个，而下面总是您当前浏览的图片 document.getElementById('newPreview').innerHTML= "<img width='50' height='50' id='aPic' src=""+imgFile.files.item(0).getAsDataURL()+"" mce_src=""+imgFile.files.item(0).getAsDataURL()+"">"; } } } // --></mce:script> </head> <body> <p>不论您使用的是 IE6 还是 IE7 还是FireFox，均可以看到以下预览。</p> <div id="newPreview"></div> <hr /> <p>请选择一个图片进行预览：<input type="file" size="20" οnchange="javascript:PreviewImg(this);" /></p> </body> </html>
以上是用了就有效的，其他参考
http://www.wyjava.com/thread-15929-1-1.html
