Question

我想使用jQuery在.on change事件中执行两个函数。我以为我可以将两个事件绑定到同一个处理程序（显然错误，因为以下函数不能相互配合使用）

函数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>

Answer 2

您只有一个错误消息字段。如果您的输入在两个方面都无效，那么您只会看到其中一个错误。

将它们与上面的答案结合起来，但在开始之前也要清除错误：

$(document).on('change', '.document_file_field', function(event) {
   var input = $(this);
   input.parent('.upload_document').find('.js-error').empty();
   file_size_check(input);
   file_extension_check(input);
 });

然后在验证器函数内部：

if ($.inArray(extension, validExtensions) == -1) {
  input_field.prev('.custom-file-upload.btn').removeClass('btn-info').addClass('btn-danger');
  var errorMsg = input_field.parent('.upload_document').find('.js-error');
  errorMsg.append($("<div/>", {
    text: extension + ' file formats are not allowed');
  }));
  input_field.parent('.upload_document').find('.btn-success').attr('disabled', 'disabled');
}

（对于另一个类似。）沿着这些行的更改将意味着每个检查将其消息添加到错误框中，在我的<div>元素内的示例中。（您可能希望将错误框设为<ul>并添加<li>元素;这取决于您的设计。）

Answer 3

每个函数都覆盖了另一个函数的结果，所以无论发生什么，最后运行都会赢，你永远不会看到第一个的结果。通过更改每个函数以返回布尔值，您可以确保只在第一个函数通过时调用第二个函数。

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

var file_extension_check = function(input_field) {
  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');
    return false;
  } 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');
    return true;
 }

}

var file_size_check = function(input) {
  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');
    return false;
 } 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'); 
    return true;
  }
}

Answer 4

看起来您的上传按钮只应在两个验证都为真的情况下启用，因此您可以返回＆＃34; true＆＃34;如果两者都为真，则为每个按钮启用，如下所示：

$(document).on('change', '.document_file_field', function(event){
var input = $(this);
var size = file_size_check(input); // returns true if valid
var extension = file_extension_check(input); // returns true if valid
if(size && extension){ $('.btn-success').removeAttr('disabled'); }
});

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

4 个答案: