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

template

<div class="el_uploadImg">
　　<p>上传安装效果图</p>
<div class="el_imgs"> 

</div> 
　　<div class="el_uploadBtn">+
　　　　<input type="file" name="file_head" id="file_head" v-on:change="setImagePreview" accept="image/*" capture="camera"/>
　　</div>
</div>

 

css

.el_uploadImg>.el_imgs{
　　width: 700px;
　　margin-left: 14px;
}

.ex_imgs{
　　position: relative;
}
.ex_imgs>.el_close{
　　position: absolute;
　　right: -14px;
　　top: -12px;
　　width: 32px;
　　height: 32px;
　　background: red;
　　border-radius: 16px;
　　color: #fff;
　　text-align: center;
　　line-height: 32px;
}
.el_uploadImg>.el_imgs>div{
　　display: inline-block;
}
.el_uploadImg>.el_imgs>div>img{
　　width: 200px;
　　height: 200px;
　　margin-left: 30px;
}

javascript

export default {
name:'el_upload',
data (){
return {
inform: [{
numbers:'A88888888888888888888',
username:'18888888888(王先生)',
code:123456,
}]
}
},
methods:{
　　setImagePreview : function(){
　　　　var file_head = document.getElementById("file_head"),
　　　　picture = file_head.value, html = ''; 
　　　　if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"), 
　　　　!1; 
　　　　if (file_head.files && file_head.files[0]){

　　　　　　//获得图片的url链接，用于显示图片
　　　　　　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]);
　　　　　　console.log(!!(file_head.files && file_head.files[0]))
　　　　　　html +='<div class="ex_imgs">'
　　　　　　html += '<img src=' + a + ' class="Preview">';
　　　　　　html += '<i class="el_close" onclick="removeThis(this)">X</i>'
　　　　　　html += '</div>'
　　　　　　$('.el_imgs').prepend(html)
　　　　}
　　　　　　//限制显示图片数量
　　　　if($('.el_imgs').find('img').length > 2){
　　　　　　$('#file_head').prop('disabled','disabled')
　　　　}
　　　　}
　　}
}