ajax使用FormData上传文件

最新推荐文章于 2024-04-28 04:01:16 发布

亥虫

最新推荐文章于 2024-04-28 04:01:16 发布

阅读量3.3k

点赞数

分类专栏： # javascript 文章标签： javascript html jquery

本文链接：https://blog.csdn.net/weixin_39020133/article/details/105448052

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

背景

在开发新项目的时候，遇到一个前端form表单上传文件，后端接收不到的情况。后面检查一下才发现，前端表单的post请求使用ajax发送的，ajax上传文件需要通过FormData实现。

代码

关键：创建一个空对象实例

var formData = new FormData();

完整代码

<script type="text/javascript"> 
             $(function () { 
               $("#upload").click(function () { 
               var formData = new FormData($('#uploadForm')[0]); 
                $.ajax({ 
                type: 'post', 
                url: "{% url 'personal-workorder-update' %}", 
                data: formData, 
                cache: false, 
                processData: false, 
                contentType: false, 
            }).success(function (data) { 
                alert(data); 
           }).error(function () { 
                alert("上传失败"); 
       }); 
    }); 
 }); 
</script>

注意：使用ajax上传文件时需要，，设置参数contentType: false 、processData: false。
关于 processData: false可以看看这篇文章：https://blog.csdn.net/weixin_39020133/article/details/105448964
关于contentType: false的简单解释可以看看这篇文章：https://blog.csdn.net/weixin_39020133/article/details/105448562