效果图如上,通过点击该加号图片可以实现input选择文件,原理即在该图片上面写了个input隐藏,在图片点击事件中添加input的模拟点击。
<input class="mui-hidden" type="file" id="inputBox" accept="image/*" capture="camera">//input
<div id="photo" class="photo" @click="choosePhoto"></div>//加号图标
<div id="remove" class="remove" style="display: none;"></div>//删除图标
图片点击事件
choosePhoto(){
var input = mui("#inputBox")[0];
input.click();//模拟点击
input.addEventListener("change",function(){ //监听input变化事件
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function(){
//读取完成后,数据保存在对象的result属性中,直接赋值给src可实现预览
var str = '';
str = '<img id="waste_img" class="waste_img" src="'+this.result+'" />';
mui('#photo')[0].insertAdjacentHTML('beforeBegin',str);
mui('#photo')[0].style.display='none';
mui('#remove')[0].style.display='';
}
})
}
删除点击事件(同时利用重建input实现清空file)
mui('#remove')[0].addEventListener('tap',function(){
var btnArray = ['否', '是'];
mui.confirm('确认删除?', '温馨提示', btnArray, function(e) {
if (e.index == 1) {
obj = mui('#waste_img')[0];
obj.parentNode.removeChild(obj);
mui('#photo')[0].style.display='';
mui('#remove')[0].style.display='none';
var file =mui("#inputBox")[0];
file.outerHTML = file.outerHTML;
} else {
return;
}
},'div')
})