前端js实现图片上传

前端js实现图片上传的原理是通过input标签的type=file属性将input标签定义为上传文件，对input进行onchange事件的监听，当input的value值改变时代表用户已经上传了图片，而input的value值就是用户上传的图片的相对路径，new一个FileReader对象，将图片转换成base64格式的编码，动态创建img标签并将转换后的编码赋值给img标签的src属性即可。

首先，进行页面布局，页面布局是用的浮动布局。

[html]  view plain  copy

1. <div class="content clearFlex">  
2.             <form action="" enctype="multipart/form-data">  
3.                 <div class="upImg clearFlex">  
4.                     <div class="imgOnloadWrap"></div>  
5.                     <div class="upWrap">  
6.                         <div class="fileWrap">  
7.                             <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>  
8.                         </div>  
9.                         <div class="imgWrap">  
10.                             <img src="img/icon6.png" alt="" />  
11.                         </div>  
12.                     </div>  
13.                 </div>  
14.             </form>  
15.         </div>  

其次对页面布局进行样式设计

[css]  view plain  copy

1. .content{  
2.     width:1000px;  
3.     height: 800px;  
4.     background:#fff;  
5.     border-radius:10px;  
6.     padding:10px;  
7.     overflow-y: scroll;  
8.     margin:0 auto;  
9.     border:1px solid #333;  
10.     border-color:rgba(169,169,169,1);  
11. }  
12. .upWrap{  
13.     width:140px;  
14.     height: 80px;  
15.     margin:10px;  
16.     float: left;  
17.     position: relative;  
18. }  
19. .upWrap > .fileWrap,.upWrap > .fileWrap > input[type=file],.upWrap > .imgWrap{  
20.     position: absolute;  
21.     height: 100%;  
22.     width:100%;  
23.     top:0;  
24.     left:0;  
25. }  
26. .upWrap > .fileWrap > input[type=file]{  
27.     z-index: 2;  
28.     opacity: 0;  
29. }  
30. .upWrap > .imgWrap{  
31.     z-index: 1;  
32. }  
33. .upWrap > .imgWrap > img{  
34.     width:100%;  
35.     height: 100%;  
36. }  
37. .upedImg{  
38.     z-index: 3 !important;  
39. }  
40. .upedImg > span.deleteImg{  
41.     position:absolute;  
42.     content: 'X';  
43.     width:20px;  
44.     font-size: 16px;  
45.     color:#ff0000;  
46.     background:rgba(0,0,0,0.6);  
47.     height:20px;  
48.     text-align: center;  
49.     line-height: 20px;  
50.     right:0;  
51.     top:0;  
52.     z-index:4;  
53. }  
54. .clearFlex:after{  
55.     clear: both;  
56.     content: '';  
57.     display: block;  
58.     height: 0;  
59.     zoom:1;  
60. }  

最后对上传图片进行逻辑交互

[javascript]  view plain  copy

1. /*------------------------------上传图片---------------------------*/  
2. function upImg(obj){  
3.     var imgFile = obj.files[0];  
4.     console.log(imgFile);  
5.     var img = new Image();  
6.     var fr = new FileReader();  
7.     fr.onload = function(){  
8.         var htmlStr = '<div class="upWrap">';  
9.         htmlStr += '<div class="fileWrap">';  
10.         htmlStr += '<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>';  
11.         htmlStr += '</div>';  
12.         htmlStr += '<div class="imgWrap upedImg"><span class="deleteImg">X</span>';  
13.         htmlStr += '<img src="'+fr.result+'" alt="" />';  
14.         htmlStr += '</div>';  
15.         htmlStr += '</div>';  
16.         $('.imgOnloadWrap').append(htmlStr);  
17.         obj.value = '';  
18.     }  
19.     fr.readAsDataURL(imgFile);  
20. }  
21. /*-----------------------------删除图片------------------------------*/  
22. $(document).on('click','.upedImg .deleteImg',function(){  
23.     //处理未来事件  
24.     $(this).parent().parent().remove();  
25. })  

[html]  view plain  copy

1. <div class="content clearFlex">  
2.             <form action="" enctype="multipart/form-data">  
3.                 <div class="upImg clearFlex">  
4.                     <div class="imgOnloadWrap"></div>  
5.                     <div class="upWrap">  
6.                         <div class="fileWrap">  
7.                             <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>  
8.                         </div>  
9.                         <div class="imgWrap">  
10.                             <img src="img/icon6.png" alt="" />  
11.                         </div>  
12.                     </div>  
13.                 </div>  
14.             </form>  
15.         </div>  

其次对页面布局进行样式设计

[css]  view plain  copy

1. .content{  
2.     width:1000px;  
3.     height: 800px;  
4.     background:#fff;  
5.     border-radius:10px;  
6.     padding:10px;  
7.     overflow-y: scroll;  
8.     margin:0 auto;  
9.     border:1px solid #333;  
10.     border-color:rgba(169,169,169,1);  
11. }  
12. .upWrap{  
13.     width:140px;  
14.     height: 80px;  
15.     margin:10px;  
16.     float: left;  
17.     position: relative;  
18. }  
19. .upWrap > .fileWrap,.upWrap > .fileWrap > input[type=file],.upWrap > .imgWrap{  
20.     position: absolute;  
21.     height: 100%;  
22.     width:100%;  
23.     top:0;  
24.     left:0;  
25. }  
26. .upWrap > .fileWrap > input[type=file]{  
27.     z-index: 2;  
28.     opacity: 0;  
29. }  
30. .upWrap > .imgWrap{  
31.     z-index: 1;  
32. }  
33. .upWrap > .imgWrap > img{  
34.     width:100%;  
35.     height: 100%;  
36. }  
37. .upedImg{  
38.     z-index: 3 !important;  
39. }  
40. .upedImg > span.deleteImg{  
41.     position:absolute;  
42.     content: 'X';  
43.     width:20px;  
44.     font-size: 16px;  
45.     color:#ff0000;  
46.     background:rgba(0,0,0,0.6);  
47.     height:20px;  
48.     text-align: center;  
49.     line-height: 20px;  
50.     right:0;  
51.     top:0;  
52.     z-index:4;  
53. }  
54. .clearFlex:after{  
55.     clear: both;  
56.     content: '';  
57.     display: block;  
58.     height: 0;  
59.     zoom:1;  
60. }  

最后对上传图片进行逻辑交互

[javascript]  view plain  copy

1. /*------------------------------上传图片---------------------------*/  
2. function upImg(obj){  
3.     var imgFile = obj.files[0];  
4.     console.log(imgFile);  
5.     var img = new Image();  
6.     var fr = new FileReader();  
7.     fr.onload = function(){  
8.         var htmlStr = '<div class="upWrap">';  
9.         htmlStr += '<div class="fileWrap">';  
10.         htmlStr += '<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>';  
11.         htmlStr += '</div>';  
12.         htmlStr += '<div class="imgWrap upedImg"><span class="deleteImg">X</span>';  
13.         htmlStr += '<img src="'+fr.result+'" alt="" />';  
14.         htmlStr += '</div>';  
15.         htmlStr += '</div>';  
16.         $('.imgOnloadWrap').append(htmlStr);  
17.         obj.value = '';  
18.     }  
19.     fr.readAsDataURL(imgFile);  
20. }  
21. /*-----------------------------删除图片------------------------------*/  
22. $(document).on('click','.upedImg .deleteImg',function(){  
23.     //处理未来事件  
24.     $(this).parent().parent().remove();  
25. })