最近项目中用到的图片上传前预览功能,兼容IE6-9,FF
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < body > < input type =file name ="doc" id ="doc" onchange ="javascript:setImagePreview();" > < p > < div id ="localImag" >< img id ="preview" width =-1 height =-1 style ="diplay:none" /></ div > </ p > < script > function setImagePreview() { var docObj = document.getElementById( " doc " ); var imgObjPreview = document.getElementById( " preview " ); if (docObj.files && docObj.files[ 0 ]){ // 火狐下,直接设img属性 imgObjPreview.style.display = ' block ' ; imgObjPreview.style.width = ' 300px ' ; imgObjPreview.style.height = ' 120px ' ; // imgObjPreview.src = docObj.files[0].getAsDataURL(); // 火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 imgObjPreview.src = window.URL.createObjectURL(docObj.files[ 0 ]); } else { // IE下,使用滤镜 docObj.select(); var imgSrc = document.selection.createRange().text; var localImagId = document.getElementById( " localImag " ); // 必须设置初始大小 localImagId.style.width = " 300px " ; localImagId.style.height = " 120px " ; // 图片异常的捕捉,防止用户修改后缀来伪造图片 try { localImagId.style.filter = " progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) " ; localImagId.filters.item( " DXImageTransform.Microsoft.AlphaImageLoader " ).src = imgSrc; } catch (e){ alert( " 您上传的图片格式不正确,请重新选择! " ); return false ; } imgObjPreview.style.display = ' none ' ; document.selection.empty(); } return true ; } </ script > </ body > </ html >