spring中，文件上传对文件大小的处理(二)_js中判断文件大小

考虑spring上传方法中出现MaxUploadSizeExceededException异常，而且controller中无法捕捉，直接就报异常。针对这种方式，我首先比较推荐前端判断的方法：

在spring的xml中配置：将上传的文件大小配置大一点：

2.<!-- SpringMVC上传文件时，需要配置MultipartResolver处理器 -->    
3.    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    
5.        <property name="defaultEncoding" value="UTF-8"/>    
6.        <!-- 指定所上传文件的总大小不能超过200KB。注意maxUploadSize属性的限制不是针对单个文件，而是所有文件的容量之和 -->    
7.        <property name="maxUploadSize" value="200000"/>  
8.        <!--resolveLazily属性启用是为了推迟文件解析，以便在UploadController 中捕获文件大小异常-->    
9.        <!-- <property name="resolveLazily" value="true"/> -->  
10.    </bean>  

jsp中，前端页面：

<body>
    <div class="file_upload" id="_file_upload">
        <div id="dialog-form" title="文件上传">
            <form id="dialog-form-fileForm" action="${pageContext.request.contextPath}/${key}/${modelCode}/uploadFile" method="post"
                enctype="multipart/form-data" target="uploadFrame">
                <table style="margin: 20px auto 0;width: 70%;">
                    <tr align="center" height="40">
                        <td colspan="5" style="text-align: center;" >
                            <button type="button" id="up_formSubmit"
                                onclick="_File_Utils.submitFile('#dialog-form')">
                                <span class="glyphicon glyphicon-arrow-up"></span> 上传
                            </button>
                        </td>
                    </tr>
                    <tr align="center" height="32">
                        <td style="min-width: 120px;" align="right"><input
                            type="checkbox" title="请选择勾选复选框！">&nbsp;&nbsp;保存名称&nbsp;</td>
                        <td style="min-width: 280px;"><input class="fileupload-name"
                            type="text" value="" size="15" name="fileName"
                            title="请填写上传文件保存名称!"></td>
                        <td align="left"><input type="file"
                            style="width: 340px; margin-left: 20px; height: 22px;" id="file"
                            name="file" onchange="_File_Utils.ckFile(this)"></td>
                    </tr>
                    <tr id="dialog-form-bt" height="40">
                        <td colspan="5" align="center">&nbsp;</td>
                    </tr>
                </table>
            </form>
        </div>
        <iframe name="uploadFrame" src="" height="0px" style="border: 0px;"></iframe>
    </div>
    <script src="${pageContext.request.contextPath}/uploadFile.js?t=<%=System.currentTimeMillis() %>"></script>
</body>

在js中，对上传文件大小进行判断：(这里使用 document.getElementById获取元素，使用files[0].size方法获取文件的大小)

var _File_Utils = {
ckFile : function(obj) {
        var fileName = $(obj).val();
        var names = fileName.split("\\");
        fileName = names[names.length - 1];
        var suf = fileName.substr(fileName.lastIndexOf("."));
//        if (suffixFile != '' && suffixFile.indexOf(suf) == -1) {
//            alert("上传文件格式错误。只能上传文件后缀为 [" + suffixFile + "]的文件");
//            $(obj).val("");
//            return;
//        }
        var fileupload = document.getElementById("file");
        var fileSize=fileupload.files[0].size;
        var maxSize=20 * 1024 * 1024;
        if(fileSize>maxSize){
             alert("文件大小已超过20M,请重新上传！");
             $(obj).val("");
        }else{
            var tr = $(obj).parent().parent();
            var fileNameInput = $(tr).find('input[name="fileName"]');
            $(fileNameInput).val(fileName);
        }
    },
}

 

posted @ 2017-07-13 21:16  小码农成长记  阅读(330)  评论(0)    收藏  举报