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

jsp中上傳圖片時的即時顯示效果

編輯:關於JSP

[html]   <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 = "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