javascript - 使用 jquery 显示多个输入类型文件的错误消息
问题描述
我的表单中有多个文件输入,我检查每个输入文件的文件大小和文件类型。我有一个出现错误消息的通用 DIV,但我想要的是能够为不同 DIV 中的每个不同文件输入显示错误消息。此代码仅适用于一般 DIV:
$("form#MyForm").submit(function() {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var file = $('input[type="file"]')[0].files[0];
$('#error').empty();
if (file && file.size > 5 * 1024 * 1024) {
$('#error').addClass('alert alert-danger');
$('#error').append("File size exceeds 5 MB");
return false;
}
if (file && file.type != 'application/pdf') {
$('#error').addClass('alert alert-danger control-group');
$('#error').append("Only PDF files");
return false;
}
}
});
HTML 代码:
<input type="file" id="file1">
<div id="error1"></div>
<input type="file" id="file2">
<div id="error2"></div>
<input type="file" id="file3">
<div id="error3"></div>
<input type="file" id="file4">
<div id="error4"></div>
如何遍历文件输入并为不符合要求的输入显示错误消息?
解决方案
将您的代码包装在 .each() 中以循环遍历每个输入元素。然后对于每一个,您可以使用.next()
从文件中找到下一个 div,这样您就可以给它们所有相同的类名(例如:“errorMessage”)
$( "input").next("div.erroMessage").append(your error message here);
HTML 的位置
<input type="file" id="file1">
<div class="errorMessage" id="error1"></div>
<input type="file" id="file2">
<div class="errorMessage" id="error2"></div>
<input type="file" id="file3">
<div class="errorMessage" id="error3"></div>
<input type="file" id="file4">
<div class="errorMessage" id="error4"></div>
推荐阅读
- sql - SQL,选择只有特定值类型的行
- php - Braintree 使用 ajax 请求处理错误
- chart.js - chartjs如何将十进制更改为整数X轴
- spring - spring oauth2 资源服务器自定义逻辑来验证令牌并设置身份验证对象
- c++ - 假设相同的 lambda 表达式具有不同的类型是否安全?
- visual-studio - Xamarin 生成的调试 facebook 登录密钥哈希与终端生成的密钥哈希不匹配
- python - python平滑移动光标位置
- lighttpd - Lighttpd mod_accesslog 管道进程
- git - Git is not accessible as a source provider from VSCode
- python - 弹性搜索:索引具有空值的日期字段