【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
堆栈跟踪：
success@http://localhost:8080/Topic/web/js/user.js:273:9
uploadCallback@http://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有待查找原因。