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")
@ResponseBody
public 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 薛萌