jQuery插件ajaxFileUpload使input[type=file] change事件丢失

功能简述

模板导入功能：选择文件后通过监听input[type=file]的onchange事件替换左侧文本框内容为所选文件路径，点击“Excel导入”按钮上传文件完成导入，如图：

问题描述

单元测试中发现，只有第一次选择文件会替换左侧文本框内容，$.ajaxFileUpload方法执行后，选择文件左侧文本框的值不再替换，但不影响上传导入功能。

问题定位

1、首先排除元素重复干扰（单一id、class等）；
2、为左侧文本框增加readonly属性，确保其值只能通过js修改；
3、逐步打印信息，确定代码执行流程是否正常；
部分源码如下：

// 选择文件按钮点击事件
$("#chooseFile").on("click",function(){
    console.log('触发click');
    $("#inParamFile").trigger('click');
});
// 隐藏元素 #inParamFile 的 change 事件
$("#inParamFile").on("change",function(){
    console.log('触发change');
    $("#epath").val($("#inParamFile").val());
});
// Excel导入按钮点击事件
$("#start_upload").on("click",function(){
    if ($("#epath").val() === '') {
        popBox.error('请先选择文件！');return;
    }
    //上传文件方法
    var url = "/admin/rest/v1/service/inParam";
    $.ajaxFileUpload({
        url : url,
        secureuri : false,
        fileElementId : 'inParamFile',
        type:"post",
        dataType : 'json',
        success : function(data, status) {
            // 重置操作...
        },
        error : function() {}
    });
});

查看打印结果发现只要调用了文件上传方法 $.ajaxFileUpload，input[type=file]的onchange事件就无法再触发。在重置操作中再次绑定change事件后功能正常。所以问题应该和 $.ajaxFileUpload方法有关。

问题解决

查看ajaxFileUpload.js源码发现，执行createUploadForm方法时会clone一个新的file元素替换原来的file元素，所以之前绑定的change事件就失效了（clone方法默认副本中不包含事件处理器）。源码如下：

var oldElement = jQuery('input[name="' + fileElementId[i] + '"]');
oldElement.each(function(index, target) {
    var newElement = jQuery(target).clone();
    jQuery(target).attr('id', fileId);
    jQuery(target).before(newElement);
    jQuery(target).appendTo(form);
});

• 解决方法一：
  重新绑定change事件（low）；
• 解决方法二：
  修改ajaxFileUpload源码：

非常简单，只需将clone()改为clone(true)，即复制元素的同时复制事件，即可解决问题，嗯~亲测可用。