jquery-ajax+springMVC实现文件上传

很多前端模块都需要文件上传，和ajax结合起来可以获得很好的用户体验，
这里分享一个springMVC的小案例，业务上考虑到了，ajax可以不断上传文件，这里并没禁止多次上传，但每次上传成功服务器端会删除掉旧文件，减少冗余文件的存在。

首先jsp页面文件—— 引入jquery

<script src="${pageContext.servletContext.contextPath}/Scripts/jquery-3.1.0.js" language="javascript" type="text/javascript"></script>

表单部分——偷懒下样式表写在属性里了
图片如果没有东西，显示默认图片，这里使用EL的concat方法，user是用户实体类，pic是头像属性

<fieldset style="position: absolute; left: 50%; width: 630px; border: 1px solid black; box-shadow: 3px 3px 6px black; margin-left: -315px"><legend style="font: 700 18px/21px 微软雅黑; letter-spacing: 3px">用户编辑</legend> <!-- 图片如果没有东西，显示默认图片，这里使用EL的concat方法，user是用户实体类，pic是头像属性 --><img src="${user.pic==null?"/upload/noPic.png":"/upload/testSpringMVC/".concat(user.pic)}" style="box-shadow: 1px 1px 3px gray; display: block; width: 256px; max-height: 256px" /></div><input type="file" name="uploadFile" accept="image/*"  multiple="multiple" /> </fieldset>

页面的js代码，使用jquery的ajax，这里需要创建form表单对象（H5支持方可，不支持就只要弄整个表单提交了）

var fn="";//全局变量，存放重复上传时的上次成功文件名，重新上传从服务器删除掉原来上传的文件$("input[name='uploadFile']").change(function(e){        var data=new FormData();//创建表单对象        //表单对象封装数据，当前选择器元素集合的第一个，选中的第一个文件（PS文件组件支持多选，服务端按文件数组处理，这里我们只处理单文件）        data.append("file",$(this)[0].files[0]);        //如果是重复上传头像，将上次成功上传的文件名一并传回，服务端可以删除旧文件，当然还有别的技术可以处理，但业务流程相同        data.append("fname",fn);        $.ajax({                type:"post",                url:"${pageContext.servletContext.contextPath}/tools/uploadFile.action",            data:data,            processData:false,            contentType:false,            success:function(data){                             if(data.saveFile!=null){                //saveFile是springMVC回传的json数据保存的文件名，同时保存的全局变量fn                fn=data.saveFile;                //改变页面图片显示，偷懒样式表写一起了                $("#imageFile").html(    "<img src='/upload/testSpringMVC/"+fn+"' style='box-shadow: 1px 1px 3px gray; display: block; width: 256px; max-height: 256px' />"  );}            }        });    });

springMVC配置文件，增加分段解析器，这里只简单做了下上传文件大小10MB

<bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver" id="multipartResolver">    <property name="maxUploadSize">        <value>10485760</value>    </property></bean>

controller部分代码，VO是自定义的 view object对象，封装了下回应信息，很简单就不贴出来了，

springMVC的json插件支持
jackson-annotations-2.4.0.jar
jackson-core-2.4.2.jar
jackson-databind-2.4.2.jar
@ResponseBody注解会自动将返回对象封装成json串，非常方便

@RequestMapping("uploadFile")@ResponseBodypublic ResponseVo uploadFile(MultipartFile file,String fname){        //获得原始文件名        String oldName = file.getOriginalFilename();        ResponseVo vo = new ResponseVo();        //获得文件扩展名，并用UUID生成不重复的新文件名        String newName=UUID.randomUUID()+oldName.substring(oldName.lastIndexOf("."));        try {        //保存新文件            file.transferTo(new File("D:\\upload\\testSpringMVC", newName));            //封装回传json数据            vo.setSaveFile(newName);            vo.setMessage("上传文件成功");            //如果存在上次上传的文件，进行删除            if(fname!=null && !fname.equals("")){                File delFile = new File("D:\\upload\\testSpringMVC",fname);                if(delFile.exists()){                    delFile.delete();                }            }            return vo;            } catch (IllegalStateException | IOException e) {               e.printStackTrace();            vo.setMessage("上传文件失败");            return vo;        }    }

完结，小小业务处理可以带给用户更好的使用体验，对于业务处理的小细节，你是不是也考虑到了呢？

Created by 薛萌