输入类型文件是 触发两次 onchange()

Question

我有这个脚本

更新：

/*on document ready*/
$(function() {
UploadFile();
}
function UploadFile(){
    $('#formarea').on('change', '.btn-file :file', function() {
        var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\/g, '/').replace(/.*//, '');
        input.trigger('fileselect', [numFiles, label]);
        alert('test');/*this showing two time*/
    });
    $('#formarea').on('fileselect','.btn-file :file', function(event, numFiles, label) {
        var input = $(this).parents('.input-group').find(':text'),
        log = numFiles > 1 ? numFiles + ' files selected' : label;
        if( input.length ) {
            input.val(log);
        } else {
            if( log ) alert(log);
        }
    });
}

我在表格上有这个字段：

<form id='formarea'>
<div class="form-group">
                                <label class="col-lg-3 control-label">Documento Adjunto:</label>
                                <div class="col-lg-12 has-warning">
                                    <div class="input-group">
                                        <span class="input-group-btn">
                                            <span class="btn btn-primary btn-file">
                                                buscar&hellip; <input id='file' type="file" name='i_file_1'>
                                            </span>
                                        </span>
                                        <input type="text" class="form-control" readonly>
                                    </div>
                                </div>
                            </div>
</form>

问题是 onchange 触发的 alert/alert('test');/是 javascript 显示两次的两倍。我需要输入时的状态填充了一个文件来启动过滤器文件扩展。

Answer 1

您正在触发第二个事件，该事件本质上在第一个事件中执行相同的操作。尝试将事件更改为函数，并将它们合并到一个".on（'change'"事件下。

$('#formarea input').on('change', function() {
    //Do stuff here
});

Answer 2

似乎这些不需要包装在函数中。您可以在文档就绪时实例化它们并实现所需的结果，如下所示：

$(function() {
    $('#formarea').on('change', '.btn-file :file', function() {
      var input = $(this),
      numFiles = input.get(0).files ? input.get(0).files.length : 1,
      label = input.val().replace(/\/g, '/').replace(/.*//, '');
      input.trigger('fileselect', [numFiles, label]);
      alert('test');
  });
  $('#formarea').on('fileselect','.btn-file :file', function(event, numFiles, label) {
      var input = $(this).parents('.input-group').find(':text'),
      log = numFiles > 1 ? numFiles + ' files selected' : label;
      if( input.length ) {
          input.val(log);
      } else {
          if( log ) alert(log);
      }
  });
});