javascript <input type="file" /> 文件格式验证在 chrome 和 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18964252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<input type="file" /> file format validation not working in chrome and IE
提问by UID
I am validating my form with Jquery validator "http://jqueryvalidation.org/".
I am getting an issue when I am validating the "<input type="file" />" field, its "required: true," validation is working and when I accept the wrong file type it throws error. But in "IE and Chrome" if I select the correct file format, still it gives the error, though its working correctly in Firefox.
我正在使用 Jquery 验证器“ http://jqueryvalidation.org/”验证我的表单。当我验证“我得到一个问题<input type="file" />”领域，其“ required: true,”验证工作，当我接受了错误的文件类型，它会引发错误。但是在“ IE 和 Chrome”中，如果我选择了正确的文件格式，它仍然会出现错误，尽管它在 Firefox 中可以正常工作。
Created the Fiddle too... This is how it is exactly working for me: http://jsfiddle.net/aasthatuteja/v6x8P/
也创建了小提琴......这就是它对我的工作方式：http: //jsfiddle.net/aasthatuteja/v6x8P/
**If you check in Chrome & IE it will give the issue, but if you check in Firefox it will work and will give the aert for "Submitted"!
**如果您在 Chrome 和 IE 中检查它会出现问题，但是如果您在 Firefox 中检查它会起作用并且会给出“已提交”的提示！
Please find the code mentioned below:-
请找到下面提到的代码：-
Jquery
查询
<script src="~/Scripts/js/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
$().ready(function () {
// validate signup form on keyup and submit
$("#deploymentUploadForm").validate({
rules:{
File: {
required: true,
accept: "zip"
}
},
messages:{
File: {
required: "This field is mandatory!",
accept: "Accepts only zip file!"
}
}
});
});
</script>
HTML
HTML
<form action="~/Deployment/FileUpload" name="deploymentUploadForm" id="deploymentUploadForm" enctype="multipart/form-data" method="post">
<h1>Deployment</h1>
<p>
<input type="file" name="File" accept="application/zip">
</p>
<div role="button" class="marginTop50 marginBottom">
<p>
<input type="submit" id="getDeploymentList" value="Upload" class="active" >
</p>
</div>
</form>
OnSubmit JQUERY
提交时 JQUERY
$("#getDeploymentList").click(function () {
if ($("#deploymentUploadForm").valid()) {
$("#deploymentUploadForm").submit();
$('#stepSummary').empty();
$.loader({
className: "blue-with-image",
content: 'Please wait...Your request is being processed!'
});
};
});
Please let me know if you need any other info.
如果您需要任何其他信息，请告诉我。
Thanks in adavace!
非常感谢！
回答by Olaf
try with(HTML):
尝试使用（HTML）：
<input id="fileSelect" type="file" accept=".zip,application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed" />
jQuery( validation )
jQuery（验证）
accept: "application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed"
and with jQuery plugin( idea ):
并使用 jQuery 插件（idea）：
(function( $ )
{
$.fn.acceptFileType=function( types )
{
if ( types == undefined )
{
return true;
}else{
types = types.split(",")
}
this.each(function(){
$( this ).bind("change",function()
{
if( !$.inArray( $( this ).val().replace(/([\d\w.]+)(\.[a-z0-9]+)/i,'') , types ) )
{
$( this ).val('');
return false;
}
return true;
});
});
};
})( jQuery );
$( ":file" ).acceptFileType(".zip");
And if you have a PHP, see this repo
如果您有 PHP，请参阅此 repo
Good Luck!
祝你好运！
回答by Becuzz
I was able to get the fiddle to work by changing your accept rule from zip to the following:
通过将您的接受规则从 zip 更改为以下内容，我能够使小提琴工作：
accept: "application/zip,application/octet-stream,application/x-zip,application/x-zip-compressed"
It looks like Firefox uses a different MIME type for the zip files than IE or Chrome. This uses a broader list of MIME types for zip files. You will need to decide if it is too broad for your purposes.
看起来 Firefox 为 zip 文件使用的 MIME 类型与 IE 或 Chrome 不同。这对 zip 文件使用了更广泛的 MIME 类型列表。您需要决定它是否对您的目的来说太宽泛了。
