<input type="file" /> 文件格式验证在 chrome 和 IE 中不起作用答案

【问题标题】：<input type="file" /> file format validation not working in chrome and IE<input type="file" /> 文件格式验证在 chrome 和 IE 中不起作用
【发布时间】：2013-09-23 16:24:19
【问题描述】：

我正在使用 Jquery 验证器“http://jqueryvalidation.org/”验证我的表单。我在验证“<input type="file" />”字段时遇到问题，它的“required: true,”验证正在工作，当我接受错误的文件类型时，它会引发错误。但是在“IE and Chrome”中，如果我选择了正确的文件格式，它仍然会给出错误，尽管它在 Firefox 中可以正常工作。

也创建了 Fiddle ......这就是它对我的确切工作方式： http://jsfiddle.net/aasthatuteja/v6x8P/

**如果您在 Chrome 和 IE 中签入它会给出问题，但如果您在 Firefox 中签入它会工作并会给出“已提交”的提示！

请找到下面提到的代码：-

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

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

提交 JQUERY

$("#getDeploymentList").click(function () {
    if ($("#deploymentUploadForm").valid()) {

        $("#deploymentUploadForm").submit();
        $('#stepSummary').empty();
        $.loader({
            className: "blue-with-image",
            content: 'Please wait...Your request is being processed!'
        });

    };
});

如果您需要任何其他信息，请告诉我。

非常感谢！

【问题讨论】：

@TusharGupta：不，它们是相同的，甚至 $(function)...
@dandavis 哦，对不起，我明白了
你小提琴在 OS X 上的 Chrome 29 中运行良好。你在测试哪个 IE？由于验证使用 HTML5 文件 API，所以在 IE9 及以下版本会失败，see.
奇怪！我正在使用相同的“Chrome 版本 29.0.1547.66 m”和 IE 10，但仍然只有文件类型验证不起作用！我的问题中也包含了屏幕截图！
请注意，文档声称 accept uses MIME types，而 zip 不是 MIME 类型。（也就是说，在我的 Mac 上，Chrome 仅在使用 Fiddle 时过滤“选择文件”对话框以查找 .zip 文件扩展名，并禁用没有该扩展名的 ZIP 文件。这不是很好，但可能适合您的需要。 )

标签： javascript jquery validation google-chrome

【解决方案1】：

尝试使用（HTML）：

<input id="fileSelect" type="file" accept=".zip,application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed" />

jQuery(验证)

accept: "application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed"

和 jQuery 插件（想法）：

(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,'\2') , types ) )
                {
                    $( this ).val('');
                    return false;
                }
                return true;
            });
        });
    };
})( jQuery );
$( ":file" ).acceptFileType(".zip");

如果你有 PHP，请查看这个 repo

https://github.com/erlandsen/upload

祝你好运！

【讨论】：

谢谢！我刚刚更改了“接受：'application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed”' 并且它起作用了..非常感谢！

【解决方案2】：

通过将您的接受规则从 zip 更改为以下内容，我能够让小提琴工作：

accept: "application/zip,application/octet-stream,application/x-zip,application/x-zip-compressed"

看起来 Firefox 对 zip 文件使用的 MIME 类型与 IE 或 Chrome 不同。这对 zip 文件使用了更广泛的 MIME 类型列表。您需要确定它是否对您的目的而言过于宽泛。

【讨论】：

谢谢！我刚刚更改了“接受：'application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed”' 并且它起作用了..非常感谢！