通过input 展示即将上传的图片（无拍照功能）

 1 template
 2 
 3 <div class="el_uploadImg">
 4 　　<p>上传安装效果图</p>
 5 <div class="el_imgs"> 
 6 
 7 </div> 
 8 　　<div class="el_uploadBtn">+
 9 　　　　<input type="file" name="file_head" id="file_head" v-on:change="setImagePreview" accept="image/*" capture="camera"/>
10 　　</div>
11 </div>
12 
13  
14 
15 css
16 
17 .el_uploadImg>.el_imgs{
18 　　 700px;
19 　　margin-left: 14px;
20 }
21 
22 .ex_imgs{
23 　　position: relative;
24 }
25 .ex_imgs>.el_close{
26 　　position: absolute;
27 　　right: -14px;
28 　　top: -12px;
29 　　 32px;
30 　　height: 32px;
31 　　background: red;
32 　　border-radius: 16px;
33 　　color: #fff;
34 　　text-align: center;
35 　　line-height: 32px;
36 }
37 .el_uploadImg>.el_imgs>div{
38 　　display: inline-block;
39 }
40 .el_uploadImg>.el_imgs>div>img{
41 　　 200px;
42 　　height: 200px;
43 　　margin-left: 30px;
44 }
45 
46 javascript
47 
48 export default {
49 name:'el_upload',
50 data (){
51 return {
52 inform: [{
53 numbers:'A88888888888888888888',
54 username:'18888888888(王先生)',
55 code:123456,
56 }]
57 }
58 },
59 methods:{
60 　　setImagePreview : function(){
61 　　　　var file_head = document.getElementById("file_head"),
62 　　　　picture = file_head.value, html = ''; 
63 　　　　if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"), 
64 　　　　!1; 
65 　　　　if (file_head.files && file_head.files[0]){
66 
67 　　　　　　//获得图片的url链接，用于显示图片
68 　　　　　　var a = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
69 　　　　　　console.log(!!(file_head.files && file_head.files[0]))
70 　　　　　　html +='<div class="ex_imgs">'
71 　　　　　　html += '<img src=' + a + ' class="Preview">';
72 　　　　　　html += '<i class="el_close" onclick="removeThis(this)">X</i>'
73 　　　　　　html += '</div>'
74 　　　　　　$('.el_imgs').prepend(html)
75 　　　　}
76 　　　　　　//限制显示图片数量
77 　　　　if($('.el_imgs').find('img').length > 2){
78 　　　　　　$('#file_head').prop('disabled','disabled')
79 　　　　}
80 　　　　}
81 　　}
82 }