Question

我正在使用jquery validate，我想限制一些文件大小作为输入。为此，我添加了函数：

jQuery.validator.addMethod("maxfilesize", function(value, element, params) {
    var elementsize;
    try{
        elementsize = $("#browse_"+$(element).attr("id"))[0].files[0].size;
    }catch(e){
        var browserInfo = navigator.userAgent.toLowerCase();
        if(browserInfo.indexOf("msie") > -1){
            var fso = new ActiveXObject("Scripting.FileSystemObject");
            elementsize = fso.getFile($("#browse_"+$(element).attr("id"))[0].value).size;
        }else{
            return true;
        }
    }
    var size = params[0], typesize = params[1];
    if( typesize == "Ko" ){
        size *= 1024;
    }else if(typesize == "Mo"){
        size *= 1024 * 1024;
    }else if(typesize == "Go"){
        size *= 1024 * 1024 * 1024;
    }
    return this.optional(element) || elementsize < size;
}, jQuery.format("The max file size of {0}{1} is reached"));

我检查$("#browse_"+$(element).attr("id"))[0].files[0].size;而不是元素，因为隐藏了我的input type="file"以使用bootstrap创建一个漂亮的按钮。问题是它总是未定义!!

当我这样做时：

$("[id^=browse_]").change( function() {
    alert('This file size is: ' + this.files[0].size + "MB");
});

HTML看起来像这样：

<form id="workflow_form" class="form-horizontal" role="form" novalidate="novalidate">
<fieldset>
    <label class="col-sm-2 control-label" for="read_1">Read 1 browsefile__sl10Gb</label>
    <div class="col-sm-10">
        <div class="input-group">
            <input id="read_1" class="form-control default" type="text" readonly="readonly" value="" name="read_1">
            <span class="input-group-btn">
                <button id="urlfile_btn_read_1" class="btn btn-default" type="button">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </div>
        <span class="help-block">Which read1 files should be used</span>
    </div>
</fieldset>
</form>
<form style="display:none;" enctype="multipart/form-data" method="post">
    <input id="browse_read_1" class="fileupload" type="file" name="browse_read_1">
</form>

我有一些javascript来处理表单与输入和按钮之间的链接以及隐藏输入文件的表单。我这样做是为了使用filupload插件......

我做错了什么？谢谢你的回复，

杰罗姆

Answer 1

$.validator.addMethod('filesize', function (value, element, arg) {
            var minsize=1000; // min 1kb
            if((value>minsize)&&(value<=arg)){
                return true;
            }else{
                return false;
            }
        });

        $("#myform" ).validate({
            rules: {
                file_upload:{
                    required:true,
                    accept:"application/pdf,image/jpeg,image/png",
                    filesize: 200000   //max size 200 kb
                }
            },messages: {
                file_upload:{
                    filesize:" file size must be less than 200 KB.",
                    accept:"Please upload .jpg or .png or .pdf file of notice.",
                    required:"Please upload file."
                }
            },
            submitHandler: function(form) {
                form.submit();
            }
        });

最小1 kb到200 kb的大小限制并经过测试

Answer 2

您应在验证器中使用element.files[0].size：

$.validator.addMethod('filesize', function (value, element, arg) {
        if(element.files[0].size<=arg){
            return true;
        }else{
            return false;
        }
    });

    $("#myform" ).validate({
        rules: {
            file_upload:{
                required:true,
                accept:"application/pdf,image/jpeg,image/png",
                filesize: 200000
            }
        },messages: {
            file_upload:{
                filesize:" file size must be less than 200 KB.",
                accept:"Please upload .jpg or .png or .pdf file of notice.",
                required:"Please upload file."
            }
        },
        submitHandler: function(form) {
            form.submit();
        }
    });

jquery验证文件大小

2 个答案: