我有两个函数,我想使用 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>
最佳答案
要组合这些方法,只需将它们全部包装在一个方法中,检查所有可能的失败。这应该有效:
$(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>
关于javascript - 在同一个事件处理程序上调用两个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28303059/