javascript - 在同一个事件处理程序上调用两个函数

Question

我有两个函数，我想使用 jQuery 通过 .on change 事件来执行。我以为我可以将两个事件绑定(bind)到同一个处理程序(显然是错误的，因为以下函数不能相互结合使用)

file_extension_check 函数将运行，但 file_size_check 不会运行，但如果我交换它们，那么最后声明的函数会起作用。这是有道理的，我只是不明白我怎样才能让他们一起工作。

我遇到的另一个问题是，我可以预见让它们一起运行，而不管它们运行的​​顺序如何，所以如果文件大小验证失败，但是你上传了不正确的文件扩展名但大小正确，我怎么能得到要显示的正确错误消息。

$(document).on('change', '.document_file_field', function() {
   var input = $(this);
   file_size_check(input);
 });

 // Functions to run to check file extension
 $(document).on('change', '.document_file_field', function() {
   var input_field = $(this);
   file_extension_check(input_field);
 });

 var file_extension_check = function(input_field) {
   console.log("file extension function fired");
   var file_name = input_field.val();
   var extension = file_name.replace(/^.*\./, '');
   extension.toLowerCase();
   var validExtensions = ['jpg', 'jpeg', 'gif', 'png', 'docx', 'mp4', 'pdf'];

   if ($.inArray(extension, validExtensions) == -1) {
     input_field.prev('.custom-file-upload.btn').removeClass('btn-info').addClass('btn-danger');
     input_field.parent('.upload_document').find('.js-error').text(extension + ' file formats are not allowed');
     input_field.parent('.upload_document').find('.btn-success').attr('disabled', 'disabled');
   } else {
     input_field.prev('.custom-file-upload.btn').removeClass('btn-danger').addClass('btn-info');
     input_field.parent('.upload_document').find('.js-error').empty();
     input_field.parent('.upload_document').find('.btn-success').removeAttr('disabled');

   }

 }

 var file_size_check = function(input) {
   console.log("file size function fired");
   var raw_file_size = input[0].files[0].size
   var file_size_mb = (Math.round((raw_file_size / 1024 / 1024) * 100) / 100)

   if (raw_file_size >= 1000000) {
     input.prev('.custom-file-upload.btn').removeClass('btn-info').addClass('btn-danger');
     input.parent('.upload_document').find('.js-error').text('File Size to large - Must be under 1mb');
     input.parent('.upload_document').find('.btn-success').attr('disabled', 'disabled');
   } else {
     input.prev('.custom-file-upload.btn').removeClass('btn-danger').addClass('btn-info');
     input.parent('.upload_document').find('.js-error').empty();
     input.parent('.upload_document').find('.btn-success').removeAttr('disabled');
   }
 }

.custom-file-upload {
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  padding: 6px 12px;
}
.btn-info {
  background: blue;
}
.btn-danger {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form class="upload_document">
  <label class="custom-file-upload btn btn-info" for="document_media"></label>
  <input type="file" id="document_media" class="document_file_field"></input>
  </br>

  <input class="btn-success" type="submit">Submit</input>
  <div class="js-error"></div>
</form>

Answer 1

要组合这些方法，只需将它们全部包装在一个方法中，检查所有可能的失败。这应该有效:

$(document).on('change', '.document_file_field', function() {
   var input = $(this);
   file_size_extension_check(input);
 });


 var file_size_extension_check = function(input) {
   console.log("function fired");
   var file_name = input.val();
   var extension = file_name.replace(/^.*\./, '').toLowerCase();
   var validExtensions = ['jpg', 'jpeg', 'gif', 'png', 'docx', 'mp4', 'pdf'];

   // check if the extension is valid
   var extensionValid = $.inArray(extension, validExtensions) >= 0;
   
   // check if the size is valid
   var raw_file_size = input[0].files[0].size;
   var sizeValid = raw_file_size < 1000000;
   
   // create messages
   var messages = [];
   if(!sizeValid) messages.push("File Size to large - Must be under 1mb.");
   if(!extensionValid) messages.push(extension + ' file formats are not allowed.');
   
   // if either are invalid show the errors, otherwise dont
   if (!sizeValid || !extensionValid) {
     input.prev('.custom-file-upload.btn').removeClass('btn-info').addClass('btn-danger');
     input.parent('.upload_document').find('.js-error').text(messages.join(' '));
     input.parent('.upload_document').find('.btn-success').attr('disabled', 'disabled');
   } else {
     input.prev('.custom-file-upload.btn').removeClass('btn-danger').addClass('btn-info');
     input.parent('.upload_document').find('.js-error').empty();
     input.parent('.upload_document').find('.btn-success').removeAttr('disabled');

   }

 }

.custom-file-upload {
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  padding: 6px 12px;
}
.btn-info {
  background: blue;
}
.btn-danger {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form class="upload_document">
  <label class="custom-file-upload btn btn-info" for="document_media"></label>
  <input type="file" id="document_media" class="document_file_field"></input>
  </br>

  <input class="btn-success" type="submit">Submit</input>
  <div class="js-error"></div>
</form>