前端写法
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做处理,服务器会做处理