我有一个HTML表单,其中有一个用于上传文件的输入字段。我希望选择的文件与所需的正确文件名(mcust.csv)匹配。如果他们选择了不同的文件,我想用JS触发错误。
表格如下:
<form name="upload-form" id="upload-form" action="upload-information.php" enctype="multipart/form-data" method="post">
<input type="file" name="dealers_csv" id="dealers_csv" required="required" data-message="Please attach the mcust.csv file.">
<button type='"submit'" name='"Submit'" id='"Submit'" class='"csbutton-color upload-button'" style='"margin-right:10px;'" >Submit files</button><img id='"loader'" src='"../images/loading.gif'" style='"display:none;'"/>
</form>
用户附加文件后,我想检测文件名(mcust.csv),如果文件名不是mcust.csv,我想在提交表单之前使用Javascript/jQuery"做点什么"(显示错误)。
这是JS:
$(document).ready(function () {
$("#upload-form").validator({
position: 'top center',
offset: [-12, 40],
relative: true,
accept: "csv",
message: '<div><em></em></div>'
})
// make sure that mcust.csv is the attached file. If not, throw alert message
$("input#dealers_csv").on("change", function() {
var dealers = $("input#dealers_csv");
var arrfilepath = dealers.val().split("''");
var filename = arrfilepath[arrfilepath.length - 1];
if (filename != "mcust.csv") {
alert("Wrong file! Please select 'mcust.csv'");
dealers.val('');
}
});
// make sure that morders.csv is the attached file. If not, throw alert message
$("input#orders_csv").on("change", function() {
var orders = $("input#orders_csv");
var arrfilepath2 = orders.val().split("''");
var filename2 = arrfilepath2[arrfilepath2.length - 1];
if (filename2 != "morders.csv") {
alert("Wrong file! Please select 'morders.csv'");
orders.val('');
}
});
});
编辑:我已经将上面的代码更新为工作版本。一个问题是:如果他们附加了错误的文件,有没有办法显示数据消息而不是"警报"?
- 禁用表单的HTML提交。否则,HTML提交将优先于JS
- 将onclick/click事件添加到提交按钮
- Click事件调用一个函数来验证您的数据
-
如果数据正常,请通过JavaScript提交表单。
<script> function validate(){ if (document.getElementById('dealers_csv').value != 'mcust.csv'){ alert('Filename must be mcust.csv'); }else{ document.getElementById('upload-form').submit(); } } </script> <form name="upload-form" id="upload-form" enctype="multipart/form-data" method="post"> <input type="file" name="dealers_csv" id="dealers_csv"> <input type="button" value="Submit" onclick="validate()"/> </form>
这:http://jsfiddle.net/pratik136/DpJYe/应该回答你的问题
编辑:fiddle已更新以反映您的表单提交要求
这里已经回答了这个问题https://stackoverflow.com/a/651767/437226
这将检查扩展。
要在没有过多代码的情况下检查文件名,请输入一个隐藏字段:
<input id="attachmentname" type="hidden" value="mcust.csv" />
然后在规则中添加一个等价性检查器:
$("#myform").validate({
rules: {
attachment: {
equalTo: "#attachmentname"
}
}
});
我认为您正在使用JQuery工具验证器。这是修改后的验证代码。
HTML
<form name="upload-form" id="upload-form" action="upload-information.php" enctype="multipart/form-data" method="post">
<input type="file" name="dealers_csv" id="dealers_csv" required="required" filename="mcust.csv">
<button type="submit" name="Submit" id="Submit" class="csbutton-color upload-button" style="margin-right:10px;" >Submit files</button><img id="loader" src="../images/loading.gif" style="display:none;" />
</form>
Javascript
$(document).ready(function () {
//definfing custom validator
$.tools.validator.fn("[filename]", function(input, value) {
var fName = input.attr("filename"),
regX = new RegExp('.*''' + fName + '$');
if (value.match(regX)) {
return true;
} else {
return {
en : "Wrong file! Please select '" + fName + "'"
};
}
});
// assigning validator to file input
$("#dealers_csv").validator({
position: 'top center',
offset: [-12, 40],
relative: true,
message: '<div><em></em></div>'
});
//triggering validation on change of file
$("#dealers_csv").change(function(){
$(this).data("validator").checkValidity();
});
});
尝试理解此代码并根据您的需要对其进行修改
将更改事件处理程序修改为:
$(document).ready(function () {
$("#dealers_csv").change(function(){
var dealers =$(this).val();
if(!dealers.match(/.*''mcust.csv$/g)){
alert("Wrong file!" + dealers);
this.value = "";
return false;
}
});
});
这是小提琴http://jsfiddle.net/NYwns/1/