springMVC文件上传

1. 前端部分

文件的提交可以使用三种方式：form表单提交，FormData提交

1.1 form表单提交

传统的web项目都是用form标签来提交的，注意form标签添加属性：enctype=”multipart/form-data”

1.1.1 使用多个单选文件input

<form action="multifileUpload" method="post" enctype="multipart/form-data" >
    <p>选择文件1: <input type="file" name="files"/></p>
    <p>选择文件2: <input type="file" name="files"/></p>
    <p>选择文件3: <input type="file" name="files"/></p>
    <p><input type="submit" value="提交"/></p>
</form>

1.1.2 使用一个多选文件input（添加multiple属性）

<h2>表单提交:方式2</h2>
<form action="multifileUpload" method="post" enctype="multipart/form-data" >
    <p>选择文件: <input type="file" name="files" multiple="multiple"/></p>
    <p><input type="submit" value="提交"/></p>
</form>

个人不是很喜欢这种表单提交方式，毕竟动不动就跳转页面

1.2 FormData异步上传（FormData是H5中增加的表单对象）

你可以使用XMLHttpRequest或者jquery ajax提交表单，这里我贴出2种写法,事先给文件input标签加一个id=”files”；

1.2.1 原生js写法

function commit1(){
        var xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }else{
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //构造FormData对象
        var formData = new FormData();
        var files = document.getElementById("files").files;
        //添加文件数据
        for(var i=0;i<files.length;i++) {
            formData.append("files", files[i]);
        }

        //使用POST方法发送数据
        xmlHttp.open("POST","/multifileUpload",true);
        xmlHttp.send(formData)
        //返回的数据
        xmlHttp.onreadystatechange=function(){
            if (xmlHttp.readyState==4 && xmlHttp.status==200){
                console.log(xmlHttp.responseText);
            }
        }
    }

1.2.1 jquery ajax 写法

注意修改contentType、processData两个参数为false，目的是把默认的普通表单修改为文件表单

function commit2(){
        var formData = new FormData();
        var files = document.getElementById("files").files;
        //添加文件数据
        for(var i=0;i<files.length;i++) {
            formData.append("files", files[i]);
        }
        $.ajax({
            url: '/multifileUpload',
            type: 'POST',
            data: formData,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) {
                alert('succeed!') //可以替换为自己的方法
            },
            error: function(returndata) {
                alert('failed!') //可以替换为自己的方法
            }
        });
    }

2 后端部分

2.1 如果是单文件上传：

public class SingleUploadController {
    /**
     * 实现文件上传
     * */
    @RequestMapping("singleFileUpload")
    public String fileUpload(@RequestParam("fileName") MultipartFile file){
        if(file.isEmpty()){
            return "false";
        }
        String fileName = file.getOriginalFilename();
        int size = (int) file.getSize();
        System.out.println(fileName + "-->" + size);

        String path = "d:/test" ;
        File dest = new File(path + "/" + fileName);
        if(!dest.getParentFile().exists()){ //判断文件父目录是否存在
            dest.getParentFile().mkdir();
        }
        try {
            file.transferTo(dest); //保存文件
            return "true";
        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return "false";
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return "false";
        }
    }
}

2.2 如果是多文件上传，使用MultipartFile的List并循环保存就ok了：

@RestController
public class MultiUploadController {

    /**
     * 实现多文件上传
     * */
    @RequestMapping(value="multifileUpload",method= RequestMethod.POST)
    public String multifileUpload(@RequestParam("files")List<MultipartFile> files){

        if(files.isEmpty()){
            return "false";
        }

        String path = "d:/test" ;

        for(MultipartFile file:files){
            String fileName = file.getOriginalFilename();
            int size = (int) file.getSize();
            System.out.println(fileName + "-->" + size);

            if(file.isEmpty()){
                return "false";
            }else{
                File dest = new File(path + "/" + fileName);
                if(!dest.getParentFile().exists()){ //判断文件父目录是否存在
                    dest.getParentFile().mkdir();
                }
                try {
                    file.transferTo(dest);
                }catch (Exception e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                    return "false";
                }
            }
        }
        return "true";
    }


}