JS浏览本地图片
1 <html> 2 <head> 3 <title>浏览本地图片</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 </head> 6 <body> 7 <p> 8 <style type="text/css"> 9 #kk{ 10 width:1000px; 11 height:300px; 12 overflow: hidden; 13 } 14 .preview_wrapper{ 15 width:176px; 16 height:176px; 17 background-color:#CCC; 18 overflow: hidden; 19 } 20 .preview_fake{ /* 该对象用于在IE下显示预览图片 */ 21 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 22 width:176px; 23 overflow: hidden; 24 } 25 #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */ 26 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); 27 width:0px; 28 visibility:hidden; 29 overflow: hidden; 30 } 31 .preview{ /* 该对象用于在FF下显示预览图片 */ 32 width:176px; 33 height:176px; 34 overflow: hidden; 35 } 36 .txtDiv{ 37 text-align:center; 38 color:blue; 39 } 40 </style> 41 42 <script type="text/javascript"> 43 44 function onUploadImgChange(sender,showImgId,showImgDivid,maxSize){ 45 if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){ 46 alert('图片格式无效！'); 47 return false; 48 } 49 var browserVersion = window.navigator.userAgent.toUpperCase(); //浏览器版本信息 50 51 var objPreview = document.getElementById(showImgId); 52 var objPreviewFake = document.getElementById(showImgDivid); 53 var objPreviewSizeFake = document.getElementById('preview_size_fake'); 54 if( sender.files && sender.files[0] ){ 55 objPreview.style.display = 'block'; 56 objPreview.style.width = 'auto'; 57 objPreview.style.height = 'auto'; 58 // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 59 //objPreview.src = sender.files[0].getAsDataURL(); 60 if (browserVersion.indexOf("FIREFOX") > -1) { //火狐浏览器 61 var firefoxVersion = parseFloat(window.navigator.userAgent.toLowerCase().match(/firefox\/([\d.]+)/)[1]); 62 if (firefoxVersion < 7) {//firefox7.0以下版本 63 objPreview.src = sender.files[0].getAsDataURL(); 64 } else {//火狐7.0以上版本 65 objPreview.src = window.URL.createObjectURL(sender.files[0]); 66 } 67 }else if(typeof FileReader !== "undefined"){ 68 //兼容chrome、火狐等，HTML5获取路径 69 var reader = new FileReader(); 70 reader.onload = function(e){ 71 objPreview.setAttribute("src",e.target.result); 72 } 73 reader.readAsDataURL(sender.files[0]); 74 }else if(browserVersion.indexOf("SAFARI")>-1){ 75 alert("暂时不支持Safari浏览器!"); 76 }else{ 77 objPreview.src = sender.files[0].getAsDataURL(); 78 } 79 }else if( objPreviewFake.filters ){ 80 // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果 81 //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决 82 // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 83 sender.select(); 84 sender.blur();//IE9安全机制，必须失去焦点才能取得值 85 var imgSrc = document.selection.createRange().text; 86 objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; 87 objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; 88 autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight ); 89 objPreview.style.display = 'none'; 90 } 91 } 92 93 function onPreviewLoad(sender){ 94 autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight ); 95 } 96 //设置图片大小 97 function autoSizePreview( objPre, originalWidth, originalHeight ){ 98 var zoomParam = ImgZoomParam( 176, 176, originalWidth, originalHeight ); 99 objPre.style.width = zoomParam.width + 'px'; 100 objPre.style.height = zoomParam.height + 'px'; 101 objPre.style.marginTop = zoomParam.top + 'px'; 102 objPre.style.marginLeft = zoomParam.left + 'px'; 103 } 104 //按比例放缩 105 function clacImgZoomParam( maxWidth, maxHeight, width, height ){ 106 var param = { width:width, height:height, top:0, left:0 }; 107 if( width>maxWidth || height>maxHeight ){ 108 rateWidth = width / maxWidth; 109 rateHeight = height / maxHeight; 110 if( rateWidth > rateHeight ){ 111 param.width = maxWidth; 112 param.height = height / rateWidth; 113 }else{ 114 param.width = width / rateHeight; 115 param.height = maxHeight; 116 } 117 } 118 param.left = (maxWidth - param.width) / 2; 119 param.top = (maxHeight - param.height) / 2; 120 return param; 121 } 122 //铺满最大值 123 function ImgZoomParam( maxWidth, maxHeight, width, height ){ 124 var param = { width:width, height:height, top:0, left:0 }; 125 param.width = maxWidth; 126 param.height = maxHeight; 127 param.left = 1; 128 param.top = 1; 129 return param; 130 } 131 </script> 132 图片一：<input type="file" id="img_01" size="28" onchange="onUploadImgChange(this,'preview','preview_fake',100)"/><br/> 133 图片二：<input type="file" id="img_02" size="28" onchange="onUploadImgChange(this,'preview2','preview_fake2',100)"/><br/> 134 图片三：<input type="file" id="img_03" size="28" onchange="onUploadImgChange(this,'preview3','preview_fake3',100)"/><br/> 135 136 <!-- <input name="localfile" type="file" id="img_01" size="28" onchange="onUploadImgChange(this,'preview','preview_fake',100)"/> 以下是预览图片用的--> 137 <div id="kk"> 138 <table id="imgTb" > 139 <tr> 140 <td> 141 <div class="preview_wrapper"> 142 <div id="preview_fake" class="preview_fake"> 143 <img id="preview" src="" class="preview" onload="onPreviewLoad(this)"/> 144 </div> 145 </div> 146 <div class="txtDiv">图片一</div> 147 </td> 148 <td> 149 <div class="preview_wrapper"> 150 <div id="preview_fake2" class="preview_fake"> 151 <img id="preview2" src="" class="preview" onload="onPreviewLoad(this)"/> 152 </div> 153 </div> 154 <div class="txtDiv">图片二</div> 155 </td> 156 <td> 157 <div class="preview_wrapper"> 158 <div id="preview_fake3" class="preview_fake"> 159 <img id="preview3" src="" class="preview" onload="onPreviewLoad(this)"/> 160 </div> 161 </div> 162 <div class="txtDiv">图片三</div> 163 </td> 164 </tr> 165 </table> 166 <img id="preview_size_fake" /> 167 </div> 168 </p> 169 </body> 170 </html>
兼容浏览器IE6,IE7,IE8,IE9,Firefox,chrome,360等浏览器
效果如下：
