javascript 上传 预览图片 兼容 谷歌 ie
最近的项目要用到这块，但是在网上找了很多资料，很多都是假的，都不行，最后终于找到一个，还是可以兼容主流的，特分享给大家，可以用
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>本地图片预览</title> 6 <style type="text/css"> 7 #preview{width:198px;height:148px;border:1px solid #000;overflow:hidden;} 8 #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} 9 </style> 10 <script type="text/javascript"> 11 function previewImage(file) 12 { 13 var MAXWIDTH = 198; 14 var MAXHEIGHT = 148; 15 var div = document.getElementById('preview'); 16 if (file.files && file.files[0]) 17 { 18 div.innerHTML = '<img id=imghead>'; 19 var img = document.getElementById('imghead'); 20 img.onload = function(){ 21 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); 22 img.width = rect.width; 23 img.height = rect.height; 24 img.style.marginLeft = rect.left+'px'; 25 img.style.marginTop = rect.top+'px'; 26 } 27 var reader = new FileReader(); 28 reader.onload = function(evt){img.src = evt.target.result;} 29 reader.readAsDataURL(file.files[0]); 30 } 31 else 32 { 33 var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; 34 file.select(); 35 var src = document.selection.createRange().text; 36 div.innerHTML = '<img id=imghead>'; 37 var img = document.getElementById('imghead'); 38 img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; 39 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); 40 status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); 41 div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>"; 42 } 43 } 44 function clacImgZoomParam( maxWidth, maxHeight, width, height ){ 45 var param = {top:0, left:0, width:width, height:height}; 46 if( width>maxWidth || height>maxHeight ) 47 { 48 rateWidth = width / maxWidth; 49 rateHeight = height / maxHeight; 50 51 if( rateWidth > rateHeight ) 52 { 53 param.width = maxWidth; 54 param.height = Math.round(height / rateWidth); 55 }else 56 { 57 param.width = Math.round(width / rateHeight); 58 param.height = maxHeight; 59 } 60 } 61 62 param.left = Math.round((maxWidth - param.width) / 2); 63 param.top = Math.round((maxHeight - param.height) / 2); 64 return param; 65 } 66 </script> 67 </head> 68 <body> 69 <div id="preview"> 70 <img id="imghead" width=198 height=148 border=0 src='' /> 71 </div> 72 <br/> 73 <input type="file" onchange="previewImage(this)" /> 74 </body> 75 </html>
如果ie9要用的话，还要修改安全配置
Internet选项 -> 安全 -> 自定义级 别 -> 将本地文件上载至服务器时包含本地目录路径 -> 选“启 动” -> 确定
当然不能要求用户来修改，其实可以查询，如果没有获取到的话，就显示默认图片，这个大家自己改了哦！
