程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> JSP編程 >> 關於JSP >> jsp上傳圖片即時顯示效果代碼

jsp上傳圖片即時顯示效果代碼

編輯:關於JSP
    <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下,使用濾鏡                        
    	ocObj.select();                        
    	var imgSrc = document.selection.createRange().text;                        
    	 var localImagId = document.getElementById("localImag");
    	 //必須設置初始大小                        
    	 localImagId.style.width = "250px";                        
    	 localImagId.style.height = "200px";
    	//圖片異常的捕捉,防止用戶修改後綴來偽造圖片
    	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>
    <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>

     

    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved