easyui文件框與html文件框實現本地圖片預覽

1.easyui文件框實現本地圖片預覽

        <tr>
	    <td>新聞小圖：</td>
	    <td><input class="easyui-filebox" id="picture" name="picture" data-options="prompt:'選擇圖片',onChange:change_photo,accept:'image/bmp,image/x-png,image/gif,image/jpeg,image/png'" style="width:260px"></td>
	</tr>
     <tr>
       <td></td>
       <td id="imgtd"><img id="img" style="height:120px;width:180px"/></td>
     </tr>

javascript代碼

       //實現圖片預覽
	function change_photo(){
            PreviewImage($("input[name='picture']")[0], 'img', 'imgtd');
        }
	
	function PreviewImage(fileObj,imgPreviewId,divPreviewId){  
	    var allowExtention=".jpg,.bmp,.gif,.png";              //允許上傳文件的後綴名document.getElementById("hfAllowPicSuffix").value;  
	    var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();              
	    var browserVersion= window.navigator.userAgent.toUpperCase();  
	    if(allowExtention.indexOf(extention)>-1){   
	        if(fileObj.files){                                 //HTML5實現預覽，兼容chrome、火狐7+等  
	            if(window.FileReader){  
	                var reader = new FileReader();   
	                reader.onload = function(e){  
	                    document.getElementById(imgPreviewId).setAttribute("src",e.target.result);  
	                }    
	                reader.readAsDataURL(fileObj.files[0]);  
	            }else if(browserVersion.indexOf("SAFARI")>-1){  
	                alert("不支持Safari6.0以下瀏覽器的圖片預覽!");  
	            }  
	        }else if (browserVersion.indexOf("MSIE")>-1){  
	            if(browserVersion.indexOf("MSIE 6")>-1){//ie6  
	                document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);  
	            }else{//ie[7-9]  
	                fileObj.select();  
	                if(browserVersion.indexOf("MSIE 9")>-1)  
	                    fileObj.blur();//不加上document.selection.createRange().text在ie9會拒絕訪問  
	                var newPreview =document.getElementById(divPreviewId+"New");  
	                if(newPreview==null){  
	                    newPreview =document.createElement("div");  
	                    newPreview.setAttribute("id",divPreviewId+"New");  
	                    newPreview.style.width = document.getElementById(imgPreviewId).width+"px";  
	                    newPreview.style.height = document.getElementById(imgPreviewId).height+"px";  
	                    newPreview.style.border="solid 1px #d2e2e2";  
	                }  
	                newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";                              
	                var tempDivPreview=document.getElementById(divPreviewId);  
	                tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);  
	                tempDivPreview.style.display="none";                      
	            }  
	        }else if(browserVersion.indexOf("FIREFOX")>-1){//firefox  
	            var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);  
	            if(firefoxVersion<7){//firefox7以下版本  
	                document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL());  
	            }else{//firefox7.0+                      
	                document.getElementById(imgPreviewId).setAttribute("src",window.URL.createObjectURL(fileObj.files[0]));  
	            }  
	        }else{  
	            document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);  
	        }           
	    }else{  
	        alert("僅支持"+allowExtention+"爲後綴名的文件!");  
	        fileObj.value="";//清空選中文件  
	        if(browserVersion.indexOf("MSIE")>-1){                          
	            fileObj.select();  
	            document.selection.clear();  
	        }                  
	        fileObj.outerHTML=fileObj.outerHTML;  
	    }  
	}

2.html文件框實現本地圖片預覽

	 <tr>
	    	<td>新聞小圖：</td>
	    	<td><input type="file" id="picture" name="picture" style="width:260px"></td>
	 </tr>

         <tr>
       <td></td>
       <td id="imgtd"><img id="img" style="height:120px;width:180px"/></td>
     </tr>

javascript代碼：

	function imgPreview(fileDom){
	    //判斷是否支持FileReader
	    if (window.FileReader) {
	        var reader = new FileReader();
	    } else {
	        alert("您的設備不支持圖片預覽功能，如需該功能請升級您的設備！");
	    }
	
	    //獲取文件
	    var file = fileDom.files[0];
	    var imageType = /^image\//;
	    //是否是圖片
	    if (!imageType.test(file.type)) {
	        alert("請選擇圖片！");
	        return;
	    }
	    //讀取完成
	    reader.onload = function(e) {
	        //獲取圖片dom
	        var img = document.getElementById("img");
	        //圖片路徑設置爲讀取的圖片
	        img.src = e.target.result;
	    };
	    reader.readAsDataURL(file);
	}

效果圖：