JQuery冒泡(选择并上传多张图片)

最近项目有一个需求，需要拍照或从相册里选择图片并上传图片

要求如图：

-------->

代码如下：

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);
	    }
	});
},