html上傳圖片預覽

[html] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. <pre name="code" class="html"><div class="item_content">  
  2.             <label for="">頭像:</label>  
  3.             <input type="file" id="face" name="myfile" placeholder="上傳頭像">  
  4.             <img src="" alt="" id="preface">  
  5.         </div>  



[html] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1.   
[html] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. //點擊上傳頭像即可實現頭像預覽  
  2.     document.querySelector('#face').onchange = function (evt) {  
  3.         var file = this.files[0];  
  4.         var type = file.type.split('/')[1];  
  5.   
  6.         if(type != 'jpg' && type != 'jpeg' && type != 'png' && type != 'gif'){  
  7.             myalert('上傳頭像格式必須爲jpg,png或gif!');  
  8.             //$('#preface').attr('src','/images/head.png');  
  9.             return;  
  10.         }  
  11.         if(file.size > 2097152){  
  12.             myalert('頭像大小不得超過2M,請重新上傳');  
  13.             //$('#preface').attr('src','/images/head.png');  
  14.             return;  
  15.         }  
  16.   
  17.         var files = evt.target.files;  
  18.         for(var i = 0, f; f = files[i]; i++){  
  19.             if(!f.type.match('image.*')) continue;  
  20.   
  21.             var reader = new FileReader();  
  22.             reader.onload = (function(theFile){  
  23.                 return function(e){  
  24.                     var img = document.createElement('img');  
  25.                     img.title = theFile.name;  
  26.                     img.src = e.target.result;  
  27.                     //document.body.appendChild(img); //這裏你想插哪插哪  
  28.                     //$('#face').appendChild(img);  
  29.                     $('#preface').attr('src',img.src);  
  30.                     $('#preface').css({'width':'76px','height':'76px'});  
  31.                 }  
  32.             })(f);  
  33.             reader.readAsDataURL(f);  
  34.         }  
  35.     }  
發佈了21 篇原創文章 · 獲贊 2 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章