ajax方式上传图片到Django后台

最新推荐文章于 2021-08-05 14:11:11 发布

转载最新推荐文章于 2021-08-05 14:11:11 发布 · 333 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gcgc/p/10678881.html

文章标签：

#python #javascript #后端 #ViewUI

本文详细介绍了一个使用Ajax进行文件上传的前端代码示例，包括HTML表单、jQuery的使用及FormData对象的构造，展示了如何通过POST方式发送文件到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考价值最大

https://blog.youkuaiyun.com/huangql517/article/details/81259671

https://www.cnblogs.com/chenjianhong/p/4144333.html

https://blog.youkuaiyun.com/anphper/article/details/78140294

https://www.bbsmax.com/A/l1dyQexdem/

1、前端代码

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}upload-file{% endblock %}
{% block content %} 
    
{#    测试上传#}
<form>
{% csrf_token %}
            <div class="updateImg">
            <input name="photo" type="file" id="exampleInputFile">
            <button id="photo" class="btn btn-danger" type="submit" onclick="ajaxFileUpload()">上传头像</button>
            </div>
</form>

    <script type="text/javascript" src='{% static "js/jquery.js"%}'></script>

     <!-- 执行上传文件操作的函数 -->
    <script type="text/javascript">
          function ajaxFileUpload(){
 var formData = new FormData();
              var fileobj=$('#avatar')[0].files[0]; //注意这里的取值方式，获取文件对象
              formData.append('avatarrrrr', fileobj);
              formData.append('title', $("#id_title").val());
              formData.append('column_id', $("#which_column").val());
              formData.append('body', $("#id_body").val());
              $.ajax({
                  url:"{% url 'article:article_post' %}",
                  type: 'POST', //一定要大写POST,坑我好久
                  mimeType: "multipart/form-data",
                  // 告诉jQuery不要去处理发送的数据, 发送对象。
                  processData : false,
                  // 告诉jQuery不要去设置Content-Type请求头
                  contentType : false,
                  data: formData,
                   success: function (data) {
                       console.log(data);
                    }
            }

               );

          }
      </script>
{% endblock %}