HTML5/JS对文件上传的大小验证

Question

<form>
<input name="name[]" type="file">
<input name="name[]" type="file">
<input name="name[]" type="file">
</form>

HTML5或JS中如何对每个上传文件的大小的验证，每个input只能选择一个文件，当大于设定的文件大小时，可以提示那个input选择的文件过大，如果符合文件大小的要求则表单可以提交。兼容性最好能兼容各类浏览器。

Answer 1

如果是使用spring的话，

    <!-- 文件上传控制 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- set the max upload size50MB -->
        <property name="maxUploadSize">
            <value>52428800</value>
        </property>
        <property name="maxInMemorySize">
            <value>4096</value>
        </property>
        <property name="defaultEncoding">
            <value>UTF-8</value>
        </property>
    </bean>

其实上传文件我记得js里面有个插件叫uploadify，这个好像可以做大小限制的，还可以做文件类型限制

这下面是我业务上得代码

        <dl>
            <dt>上传附件：</dt>
            <dd>
                <input type="file"  id="uploadify_pr">
                <input  name="annexPath" type="text"  size="52" value="" readonly="readonly">仅支持压缩格式rar与zip
            </dd>
        </dl>

  $("#uploadify_pr").uploadify({
        //指定swf文件
        'swf': 'resources/uploadify/scripts/uploadify.swf',
        //后台处理的页面
        'uploader': '/fileUpload/upload',
        //按钮显示的文字
        'buttonText': '选择需要上传的附件',
        'fileTypeDesc': 'Files',
        'fileTypeExts': '*',
        //发送给后台的其他参数通过formData指定
        'formData': { 'relatedObj': 'project/demand/annex'},
        //选择文件后自动上传
        'auto': true,
        //设置为true将允许多文件上传
        'multi': false,
        'fileObjName': 'file',
        //设置文件上传成功之后的回调函数
        'onUploadSuccess':function(file,data, response){
            var $data = $.parseJSON(data);
            if($data.code != "200"){
                alertMsg.error($data.msg);
                return ;
            }
            $("input[name='annexPath']").attr("value",$data.path);
        }
    });