【JavaScript】上传文件时监听change事件（只能被触发一次）

问题提出：做文件上传时，对input监听change时间，但是change事件只能被触发一次。

Bug产生原因：尚未查到。

解决方案：当一次上传完成后，替换原有的input并重新绑定change时间。

HTML:

<button id="uploadBtn">修改头像</button>
<input type="file" id="file" name="file" style='display: none;'>
           

原有JS代码：会引发只触发一次change事件。

var uploadBtn = $("#uploadBtn");
var fileBtn = $("#file");
$(uploadBtn).click(function() {
	$(fileBtn).click();
});
$(fileBtn).change(function() {
	var size = $(fileBtn)[0].files[0].size;
	alert(size);
	var type = $(fileBtn)[0].files[0].name;
	console.log(type);
	$.ajaxFileUpload({
		url : '/Topic/imgUploadController/fileUpload',
		type : 'post',
		secureuri : false, //一般设置为false
		fileElementId : 'file', // 上传文件的id、name属性名
		dataType : 'text', //返回值类型，一般设置为json、application/json
		success : function(data, status) {
			var strs = data.match( /{(\S*)}/ig);
			var jsonStr = JSON.parse(strs[0]);
			var binatyImg = jsonStr.binaryImg;
			$("#userHeaderImg").attr("src",binatyImg);
		},
		error : function(data, status, e) {
			alert(e);
		}
	});
})
           

第一次修改：

<button id="uploadBtn">修改头像</button>
<input type="file" id="file0" name="file0" style='display: none;'>

var key = 0;
var uploadBtn = $("#uploadBtn");
$(uploadBtn).click(function() {
	$("#file"+key).click();
});
$("#file"+key).change(function(){
	uploadImg(key);
});
function uploadImg(key){
	var size = $("#file"+key)[0].files[0].size;
	alert(size);
	var type = $("#file"+key)[0].files[0].name;
	console.log(type);
	$.ajaxFileUpload({
		url : '/Topic/imgUploadController/fileUpload',
		type : 'post',
		secureuri : false, //一般设置为false
		fileElementId : 'file'+key, // 上传文件的id、name属性名
		dataType : 'text', //返回值类型，一般设置为json、application/json
		success : function(data, status) {
			var strs = data.match( /{(\S*)}/ig);
			var jsonStr = JSON.parse(strs[0]);
			var binatyImg = jsonStr.binaryImg;
			$("#userHeaderImg").attr("src",binatyImg);
		},
		complete:function(){
			var _obj = $("#file"+key);
			_obj.replaceWith("<input type='file' id='file"+key+"' name='file"+key+"' style='display:none;'>");
			key++;
			$(uploadBtn).click(function() {
				$("#file"+key).click();
			});
			
			$("#file"+key).change(function(){
				uploadImg(key);
			})
		},
		error : function(data, status, e) {
			console.log(e);
		}
	});
}
           

这次修改主要是想，动态修改id和name的值，通过key区分input。但是，存在bug。当id和name为“file”之外的值时，上传文件失效，莫名其妙的错误。报错如下：

TypeError: strs is null
堆栈跟踪：
[email protected]://localhost:8080/Topic/web/js/user.js:273:9
uploadCallb[email protected]://localhost:8080/Topic/web/js/ajaxfileupload.js:111:29
           

再次修改，干脆，保持id和name值不变，源码如下：

<button id="uploadBtn">修改头像</button>
<input type="file" id="file" name="file" style='display: none;'>

var key = "";
var uploadBtn = $("#uploadBtn");
$(uploadBtn).click(function() {
	$("#file"+key).click();
});
$("#file"+key).change(function(){
	uploadImg(key);
});
function uploadImg(key){
	var size = $("#file"+key)[0].files[0].size;
	alert(size);
	var type = $("#file"+key)[0].files[0].name;
	console.log(type);
	$.ajaxFileUpload({
		url : '/Topic/imgUploadController/fileUpload',
		type : 'post',
		secureuri : false, //一般设置为false
		fileElementId : 'file'+key, // 上传文件的id、name属性名
		dataType : 'text', //返回值类型，一般设置为json、application/json
		success : function(data, status) {
			var strs = data.match( /{(\S*)}/ig);
			var jsonStr = JSON.parse(strs[0]);
			var binatyImg = jsonStr.binaryImg;
			$("#userHeaderImg").attr("src",binatyImg);
		},
		complete:function(){
			var _obj = $("#file"+key);
			_obj.replaceWith("<input type='file' id='file"+key+"' name='file"+key+"' style='display:none;'>");
			
			$(uploadBtn).click(function() {
				$("#file"+key).click();
			});
			
			$("#file"+key).change(function(){
				uploadImg(key);
			})
		},
		error : function(data, status, e) {
			console.log(e);
		}
	});
}
           

这次问题完美解决。

至于上面的bug有待查找原因。