欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

SpringMVC+jquery实现文件上传教程

程序员文章站 2022-06-29 23:29:58
上传文件有很多种方法,这里主要讲依赖commons-io.jar和commons-fileupload(版本没有太大要求,能实现功能即可)实现,楼主用的是commons-fileu...

上传文件有很多种方法,这里主要讲依赖commons-io.jar和commons-fileupload(版本没有太大要求,能实现功能即可)实现,楼主用的是commons-fileupload-1.3.1.jar和commons-io-2.4.jar。

    主pom.xml配置

[html] view plain copy

<dependency>  

                <groupid>commons-io</groupid>  

                <artifactid>commons-io</artifactid>  

                <version>${commons.io.version}</version>  

</dependency>  

<dependency>  

                <groupid>commons-fileupload</groupid>  

                <artifactid>commons-fileupload</artifactid>  

                <version>${commons.fileupload.version}</version>  

</dependency>  

    除了引入上述两种jar包,还可以在spring配置文件中添加id为multipartresolver的bean,用于控制文件上传的大小,

[html] view plain copy

<bean id="multipartresolver" class="org.springframework.web.multipart.commons.commonsmultipartresolver">    

        <property name="defaultencoding" value="utf-8" />    

        <property name="maxuploadsize" value="10240000" />    

        <!-- 设置在文件上传时允许写到内存中的最大值,以字节为单位计算,默认是10240 -->    

        <!-- 但是经实验,上传文件大小若小于此参数,则不会生成临时文件,故改为2048 -->    

        <property name="maxinmemorysize" value="2048" />      

</bean>    

准备工作做好后,开始编写前端代码。前端用form表单,enctype一定要为"multipart/form-data",否则无法实现文件的上传。

[html] view plain copy

<form:form id="file_form"  

        action="${ctx}/enduser/upload"  

        enctype="multipart/form-data" method="post">  

        <p class="modal-dialog">  

            <p class="modal-content">  

                <p class="modal-header">  

                    <button type="button" class="close" data-dismiss="modal"  

                        aria-hidden="true">×</button>  

                    <h4 class="modal-title" id="blanktitle">  

                        导入excel  

                        <!-- 提示 -->  

                    </h4>  

                </p>  

                <p class="modal-body" id="modal-body">  

                    <p class="row">  

                        <p class="form-horizontal">  

                            <p class="form-group ">  

                                <label class="col-lg-4 col-sm-4 control-label">文件选择:</label>  

                                <p class="col-lg-8 col-sm-8">  

  

                                    <input type="file" name="file" id="file_input" />  

  

                                </p>  

                            </p>  

                        </p>  

                    </p>  

                    <p class="row">  

                        <p class="form-horizontal">  

                            <p class="form-group ">  

                                <label class="col-lg-4 col-sm-4 control-label">文件上传:</label>  

                                <p class="col-lg-8 col-sm-8">  

                                    <input type="submit" value="上传" id='upfile-btn'>  

                                </p>  

                            </p>  

                        </p>  

                    </p>  

                </p>  

            </p>  

        </p>  

</form:form>  

form提交时通过jquery校验文件上传的格式,楼主这里实现上传excel文件,所以校验excel格式

[html] view plain copy

$("#file_form").submit(  

            function() {  

                //首先验证文件格式  

                var filename = $('#file_input').val();  

                if (filename === '') {  

                    alert('请选择文件');  

                    return false;  

                }  

                var filetype = (filename.substring(filename  

                        .lastindexof(".") + 1, filename.length))  

                        .tolowercase();  

                if (filetype !== 'xls' && filetype !== 'xlsx') {  

                    alert('文件格式不正确,excel文件!');  

                    return false;  

                }  

                        }  

});  

仅校验是不够的,还需要用ajaxsubmit进行假提交,即不真正提交文件到服务器,而是只在后台获取上传的文件

[html] view plain copy

$("#file_form").submit(  

    $("#file_form").ajaxsubmit({  

                    datatype : "json",  

                    clearform: true,   

                    success : function(data, textstatus) {  

                        if (data.returncode == 1) {  

                            console.log('上传文件成功');  

                            alert("上传文件成功");  

                        } else {  

                            console.log('文件格式错误');  

                            alert("文件格式错误");  

                        }  

                        return false;  

                    }  

                });   

            return false;  

    });  

后台通过form的action转发的url获取上传的文件,方法名和url同名,文件则是以multipartfile类型传递的

[java] view plain copy

    /** 

     * /enduser/upload 

     * 导入excel 

     * @param request 

     * @throws exception  

     */  

    @requestmapping(value="/upload",method= {requestmethod.post})  

    @responsebody  

    public string upload(@requestparam(value = "file") multipartfile file,httpservletrequest request) throws exception  {  

          

        //判空  

        if(file.isempty()) {  

            return null;  

        }  

        logger.debug("原始文件名称:"+file.getname());  

        logger.debug("==========开始转换excel文件==========");  

        //multipartfile转换为file  

        file f = multiparttofile(file);  

        try {  

enduserprovider.importexcel(f);  

 catch (exception e) {  

logger.error("==========解析excel文件失败==========",e);  

  

        return "redirect:/enduser/list";  

    }  

值得注意的是,文件通过multipartfile类型传到后台时,若文件为空,multipartfile不为空,而是用multipartfile.isempty()判空。

文件由multipartfile转为file后,由file得到文件的输入流is,通过workbookfactory创建workbook对象

[java] view plain copy

fileinputstream is = new fileinputstream(file);  

workbook = workbookfactory.create(is);  

is.close();  

最后就是通过workbook对象得到sheet对象,然后得到excel的行和列,分别遍历行列进行文件的处理啦

[java] view plain copy

for(int i=0;i<workbook.getnumberofsheets();i++) {  

    //获取excel文件的第一个sheetsheet sheet = workbook.getsheetat(i);    

    //获取文件的行  

    int totalrows = sheet.getphysicalnumberofrows();   

    //循环excel行数    

    for (int r = 1; r < totalrows; r++) {   

        row row = sheet.getrow(r);    

    if (row == null){    

         continue;    

                }  

    //遍历列    

        for (int c = 0; c < totalcells; c++) {    

         cell cell = row.getcell(c);  

            //文件处理  

            }  

      }  

}