jQuery文件上传以及MultipartFile

前端写法

1.直接使用html原生表单

<form action="/demo/upload2" method="POST" enctype="multipart/form-data">
    <input id="file" type="file" name="mFile"/>
    <input type="submit" value="上传"/>
</form>

这种方式写form标签必须要有，并且必须要有action、method、和enctype属性，且entype属性值必须为multipart/form-data，这样后台才会认为这是一个二进制文件进行接收。

2.直接使用javascript来获取html标签中文件的值
html：

<input id="file" type="file" name="mFile"/>
<input type="button" onclick="upload()" value="上传">

javascript:

function upload() {
var formData = new FormData();
formData.append("mFile",$("#file")[0].files[0]);
$.ajax({
    url: "/demo/upload2",
    type: 'POST',
    data: formData,
    processData: false,
    contentType:false,
    success : function(data) {
        console.log(data);
    }
  });
}

这种写法可以省略很多html代码，使得页面结构在编码时显得简单易懂，大部分工作都交由javascript来完成，尤其因为去掉了form标签，所以得使用javascript的FormData来手动构建表单对象，文件的二进制数据可以直接使用jQuery来获取到，然后再通过ajax提交到服务端即可。使用这种方法必须注意一下几点：

表单数据必须要由FormData来构建
processData必须为false，告诉jQuery不要对参数进行处理
contentType必须为false，告诉jQuery不要对contentType做处理，服务器会做处理