通过ajax上传multipart文件

最新推荐文章于 2025-04-04 18:35:42 发布

CodingSlag

最新推荐文章于 2025-04-04 18:35:42 发布

阅读量2.5w

点赞数 4

分类专栏： ajax 文章标签： javascript ajax FormData multipart 文件上传

本文链接：https://blog.youkuaiyun.com/u012234915/article/details/54743295

版权

ajax 专栏收录该内容

2 篇文章

订阅专栏

使用FormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。

html:

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

javascript:

$.ajax({
    url: "/upload",
    type: 'POST',
    cache: false,
    data: new FormData($("#uploadForm")[0]),
    processData: false,
    contentType: false,
    success: function (result) {
    },
    error: function (err) {
    }
});

这里要注意几点：

processData设置为false。因为data值是FormData对象，不需要对数据做处理。
<form>标签添加enctype="multipart/form-data"属性。
cache设置为false，上传文件不需要缓存。
contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。