html上传图片预览

[html] view plain copy

 

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

 

1.   

[html] view plain copy

 

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.     }