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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值