最近项目有一个需求,需要拍照或从相册里选择图片并上传图片
要求如图:
-------->
代码如下:
function getObjectURL(file){ //获取上传的本地图片的绝对路径
var url=null
if(window.createObjectURL!=undefined){ // basic
url=window.createObjectURL(file)
}else if(window.URL!=undefined){ // mozilla(firefox)
url=window.URL.createObjectURL(file)
}else if(window.webkitURL!=undefined){ // webkit or chrome
url=window.webkitURL.createObjectURL(file)
}
return url;
}
<div class="img1" id="img1">
<input id="file1" class="file1" type="file" accept="image/*" multiple="multiple" @click="showImg1"/>
<hr class="line1" />
<hr class="line2" />
</div>
showImg1(){ //上传并显示头像
$("#file1").change(function(){
var objUrl=getObjectURL(this.files[0]);//this相当于document.getElementById("file1")
var index = this.files[0].name.indexOf("."); //获取点的位置
var img_id = this.files[0].name.substring(index); //截断点之前的,得到文件后缀
if(objUrl){
//在包裹input框的div前加
var goodImg = '<img width="100px" src="' + objUrl + '" alt="" />';
$("#img1").before(goodImg);
}
});
},
问题:第一次点击正常发生,但第二次会发生两次,第三次发生三次。。。。。。
原因:.change()事件
方法:用.off()阻止.change()事件冒泡
showImg1(){ //上传并显示头像
$("#file1").off("change");//阻止.change()事件冒泡
$("#file1").change(function(){})
$("#file1").on("change",function(){
var objUrl=getObjectURL(this.files[0]);//this相当于document.getElementById("file1")
var index = this.files[0].name.indexOf("."); //获取点的位置
var img_id = this.files[0].name.substring(index); //截断点之前的,得到文件后缀
if(objUrl){
//在包裹input框的div前加
var goodImg = '<img width="100px" src="' + objUrl + '" alt="" />';
$("#img1").before(goodImg);
}
});
},