基于SpringMVC的上传图片

系统开发的时候有时候须要上传文件，如图片，使用Ajax上传跟平时的写法稍微不同，这里举例一下。

前端展现

<form class="am-form" id="userdata">
    <div class="am-form-group">
        <input type="text" name="username" placeholder="请输入姓名">
    </div>

    <div class="am-form-group am-form-file">
        <div>
            <button type="button" class="am-btn am-btn-default am-btn-sm">
            <i class="am-icon-cloud-upload"></i> 选择要上传的图片</button>
        </div>
        <input type="file"  name="inputfile">
    </div>

    <p>
        <button type="submit" class="am-btn am-btn-primary" id="save">提交</button>
    </p>
</form>
复制代码

Ajax上传

<script type="text/javascript">
    $("#save").click(function() {
        var form = new FormData($("#userdata")[0]);
        $.ajax({
            type : 'post',
            url : ...,//选择上传地址
            dataType : 'json',
            data : form,
            async : false,
            contentType : false, //必须
            processData : false, //必须
            error : function(result) {
        	    alert(result);
            },
            success : function(result) {
    	        if (result.code == 1) {
    	
    	        } else {
    		        alert("添加失败");
    	    }
        }
    });
</script>
复制代码

FormData是HTML5的一个功能，它使得文件上传十分容易，固然可继续添加其余参数：

formData.append("键", 值);
复制代码

SpringMVC的XML配置

<!-- 文件上传解析器 -->
<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 设置上传文件的最大尺寸为5MB -->
    <property name="maxUploadSize">
	    <value>5242880</value>
    </property>
</bean>
复制代码

后端上传

@RequestMapping(value="/add",method=RequestMethod.POST)
@ResponseBody
public Msg addUser(@RequestParam("inputfile") MultipartFile inputfile,User user){
    if(!inputfile.isEmpty()){
        //一、获取图片完整名称
        String fileStr=inputfile.getOriginalFilename();
        //二、使用随机生成的字符串+源图片扩展名组成的新的图片名称，防止图片重名
        String newFilename=UUID.randomUUID().toString()
                        +fileStr.substring(fileStr.lastIndexOf("."));
        //三、将图片保存到硬盘
        try {
            inputfile.transferTo(new File(path+newFilename));
        } catch (IllegalStateException | IOException e) {
            e.printStackTrace();
        }
        //四、将图片新的名称保存到数据库
        user.setPicture(newFilename);
    }
    userService.addUser(user);
    return Msg.quickSuccess();
}
复制代码

MultipartFile

SpringMVC可以使用MultipartFile上传文件，它还有其余的方法，可供参考

    String getContentType()//获取文件MIME类型
    InputStream getInputStream()//后去文件流
    String getName() //获取表单中文件组件的名字
    String getOriginalFilename() //获取上传文件的原名
    long getSize()  //获取文件的字节大小，单位byte
    boolean isEmpty() //是否为空
    void transferTo(File dest) //保存到一个目标文件中。
复制代码

整个上传流程其实很简单，只要了解FormData和MultipartFile就能够简单的编写上传功能。