ajax方式上傳圖片到Django后台

參考價值最大

https://blog.csdn.net/huangql517/article/details/81259671

 

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

 

https://blog.csdn.net/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 %}

獲取上傳文件的取值方式：$('#exampleInputFile')[0].files[0]

可以在console中測試一下