<input type =“file”/>文件格式验证在chrome和IE中无效

时间:2013-09-23 16:24:20

标签: javascript jquery validation google-chrome

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

也创造了小提琴......这就是它对我的影响: http://jsfiddle.net/aasthatuteja/v6x8P/

**如果你签入Chrome&amp; IE它会给出问题,但是如果你在Firefox中检查它会工作并且会给“提交”的aert提供!

enter image description here

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

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>

OnSubmit JQUERY

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

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

    };
});

如果您需要任何其他信息,请与我们联系。

感谢adavace!

2 个答案:

答案 0 :(得分:6)

尝试使用(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,请参阅此回购

  

https://github.com/erlandsen/upload

祝你好运!

答案 1 :(得分:3)

我可以通过将接受规则从zip更改为以下内容来解决问题:

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

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