JS 圖片上傳預覽

時間  2020-03-16
標籤 圖片 上傳 預覽 欄目 JavaScript 简体版
原文   原文鏈接

 頁面部分：javascript

 

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3.     <head> 
    4. 
   
   
   
   
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
   
   
   
   
  5.     </head> 
    6. 
   
   
   
   
  6.  
    7. 
   
   
   
   
  7.     <body> 
    8. 
   
   
   
   
  8.         <div> 
    9. 
   
   
   
   
  9.             <input type="file" name="upfile" id="upfile"  onchange="imgPreObj.changeFiles(this)"/> 
    10. 
   
   
   
   
  10.             <div id="preview"><img src="" id="imgPre"></div> 
    11. 
   
   
   
   
  11.         </div> 
    12. 
   
   
   
   
  12.     </body> 
    13. 
   
   
   
   
  13. </html> 
    14.

javascript代碼：html

 

  
  
  
  
    
   
   
   
   
  1. /** 
    2. 
   
   
   
   
  2.  * @title 兼容多瀏覽器的圖片上傳預覽 
    3. 
   
   
   
   
  3.  * @support IE6+,Firefox,Opera,Chrome 
    4. 
   
   
   
   
  4.  * @author gaorunqiao / goen88@163.com 
    5. 
   
   
   
   
  5.  * @version g.f.i.p0.0.0.02 
    6. 
   
   
   
   
  6.  * @date 2012/08/31 
    7. 
   
   
   
   
  7.  */ 
    8. 
   
   
   
   
  8.  
    9. 
   
   
   
   
  9. //圖片上傳預覽 
    10. 
   
   
   
   
  10. function FILE_IMG_PREVIEW(imgID){ 
    11. 
   
   
   
   
  11.     this.fileObj = {}; //input file對象 
    12. 
   
   
   
   
  12.     this.imgID = imgID;   //輸出圖片對象ID 
    13. 
   
   
   
   
  13.     this.formatFilter = ".jpg;.png;.gif;.bmp;"; 
    14. 
   
   
   
   
  14. } 
    15. 
   
   
   
   
  15.  
    16. 
   
   
   
   
  16. //文件選取完成回調 
    17. 
   
   
   
   
  17. FILE_IMG_PREVIEW.prototype.changeFiles = function(obj){ 
    18. 
   
   
   
   
  18.     this.fileObj = obj; 
    19. 
   
   
   
   
  19.     var oImgID = this.imgID; //輸出圖片ID 
    20. 
   
   
   
   
  20.      
    21. 
   
   
   
   
  21.     if(this.checkFormat()==false) return; //文件格式檢測 
    22. 
   
   
   
   
  22.      
    23. 
   
   
   
   
  23.     if(typeof FileReader != 'undefined'){ //支持html5讀取文件URL 
    24. 
   
   
   
   
  24.             var files = this.fileObj.files; 
    25. 
   
   
   
   
  25.             if(files.length>0){ 
    26. 
   
   
   
   
  26.                 var reader = new FileReader(); 
    27. 
   
   
   
   
  27.                 reader.onloadend = function(e) { 
    28. 
   
   
   
   
  28.                     document.getElementById(oImgID).src= this.result; 
    29. 
   
   
   
   
  29.                 }  
    30. 
   
   
   
   
  30.                 reader.readAsDataURL(files[0]); 
    31. 
   
   
   
   
  31.             } 
    32. 
   
   
   
   
  32.     }else{ 
    33. 
   
   
   
   
  33.         document.getElementById(oImgID).src = this.getPath(); 
    34. 
   
   
   
   
  34.     } 
    35. 
   
   
   
   
  35. } 
    36. 
   
   
   
   
  36.  
    37. 
   
   
   
   
  37. //獲取本地文件路徑 
    38. 
   
   
   
   
  38. FILE_IMG_PREVIEW.prototype.getPath = function(){ 
    39. 
   
   
   
   
  39.      if (this.fileObj) {  
    40. 
   
   
   
   
  40.           //取得IE下本地圖片路徑     
    41. 
   
   
   
   
  41.           if (window.navigator.userAgent.indexOf("MSIE") >= 1) {     
    42. 
   
   
   
   
  42.               this.fileObj.select();  
    43. 
   
   
   
   
  43.               this.fileObj.blur(); 
    44. 
   
   
   
   
  44.               // IE下取得圖片的本地路徑     
    45. 
   
   
   
   
  45.               return document.selection.createRange().text;     
    46. 
   
   
   
   
  46.           }     
    47. 
   
   
   
   
  47.           //firefox     
    48. 
   
   
   
   
  48.           else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {   
    49. 
   
   
   
   
  49.               if (this.fileObj.files) {   
    50. 
   
   
   
   
  50.                   // Firefox下取得的是圖片的數據     
    51. 
   
   
   
   
  51.                   return this.fileObj.files.item(0).getAsDataURL();   
    52. 
   
   
   
   
  52.               }     
    53. 
   
   
   
   
  53.               return this.fileObj.value;     
    54. 
   
   
   
   
  54.           }     
    55. 
   
   
   
   
  55.           return this.fileObj.value;     
    56. 
   
   
   
   
  56.      }else{ 
    57. 
   
   
   
   
  57.         return ''; 
    58. 
   
   
   
   
  58.      } 
    59. 
   
   
   
   
  59. } 
    60. 
   
   
   
   
  60.  
    61. 
   
   
   
   
  61. //檢測上傳文件的格式 
    62. 
   
   
   
   
  62. FILE_IMG_PREVIEW.prototype.checkFormat = function(){ 
    63. 
   
   
   
   
  63.     var upfile = this.fileObj.value; 
    64. 
   
   
   
   
  64.     var format = upfile.substr(upfile.lastIndexOf('.')).toLowerCase(); 
    65. 
   
   
   
   
  65.      
    66. 
   
   
   
   
  66.     if(this.formatFilter.indexOf(format)!=-1){ 
    67. 
   
   
   
   
  67.         return true; 
    68. 
   
   
   
   
  68.     }else{ 
    69. 
   
   
   
   
  69.         alert('錯誤：文件格式不正確，只支持'+this.formatFilter); 
    70. 
   
   
   
   
  70.         return false; 
    71. 
   
   
   
   
  71.     } 
    72. 
   
   
   
   
  72. } 
    73.
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程