Django之Ajax文件上傳

基於form表單的文件上傳 

　　　　模板部分

      用戶名 <input type="text" name="user">
      頭像 <input type="file" name="avatar">  #如果不用form_data格式來發，那么默認的是urlencoded的格式，這個標簽的數據會組成avatar:文件名字來進行發送
    <input type="submit">
</form>

　　　　視圖部分

def index(request):
    print(request.body)   # 原始的請求體數據
    print(request.GET)    # GET請求數據
    print(request.POST)   # POST請求數據
    print(request.FILES)  # 上傳的文件數據

    return render(request,"index.html")

　　upload.py，內容如下：

def upload(request):

    if request.method == 'GET':

        return render(request,'upload.html')
    else:
        print(request.POST)
        username = request.POST.get('user')
        file_obj = request.FILES.get('file_obj') #獲得文件數據對象
        print('>>>',file_obj,type(file_obj))
        #>>> jaden博客.txt <class 'django.core.files.uploadedfile.InMemoryUploadedFile'>,一個文件對象,可以理解為一個文件句柄
        file_name = file_obj.name #jaden博客.txt
        print(file_name)
        # 將數據寫到文件里面,需要名字，需要數據
        with open(file_name,'wb') as f: #直接把文件名字放這里，那么文件將直接生成在django的整個項目目錄下，因為django配置的系統搜索的根路徑就是咱們的項目文件夾路徑，那個BASE_DIR,一般我們需要自己建立一個文件夾專門存放上傳的文件
　　　　　　#所以需要我們自己來拼接一個路徑放到這里，os.path.join(settings.BASE_DIR,'media','img',file_name)

            # f.write()  #不能一下寫進去，占用的內容太多，要一點一點寫
            for data in file_obj: #讀數據
                f.write(data)  #每次讀取的data不是固定長度的，和讀取其他文件一樣，每次讀一行，識別符為\r  \n  \r\n，遇到這幾個符號就算是讀了一行

　　　　　　　#for chunks in file_obj.chunks(): #chunks()默認一次返回大小為經測試為65536B，也就是64KB，最大為2.5M，是一個生成器
    　　　　 #　 f.write(chunks)

 

　　　　通過js來找文件對象

　　　　　　

 

 

 

基於Ajax的文件上傳

　　　　模板

　　　　　　{% csrf_token %}
      用戶名 <input type="text" id="user">
      頭像 <input type="file" id="avatar">
     <input type="button" id="ajax-submit" value="ajax-submit">
</form>

<script>

    $("#ajax-submit").click(function(){
        var formdata=new FormData(); #ajax上傳文件的時候，需要這個類型，它會將添加給它的鍵值對加工成formdata的類型
        formdata.append("user",$("#user").val());  #添加鍵值的方法是append，注意寫法，鍵和值之間是逗號
     　　formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val()); #別忘了csrf_token
        formdata.append("avatar_img",$("#avatar")[0].files[0]);

        $.ajax({

            url:"",
            type:"post",
            data:formdata, #將添加好數據的formdata放到data這里
            processData: false ,    // 不處理數據
            contentType: false,    // 不設置內容類型

            success:function(data){
                console.log(data)
            }
        })

    })

</script>

　　　　　　或者使用

var form = document.getElementById("form1");
var fd = new FormData(form);

　　　　　　這樣也可以直接通過ajax 的 send() 方法將 fd 發送到后台。

　　　　　　注意：由於 FormData 是 XMLHttpRequest Level 2 新增的接口，現在 低於IE10 的IE瀏覽器不支持 FormData。

　　視圖

def index(request):

    if request.is_ajax():

        print(request.body)   # 原始的請求體數據
        print(request.GET)    # GET請求數據
        print(request.POST)   # POST請求數據
        print(request.FILES)  # 上傳的文件數據

        return HttpResponse("ok")


    return render(request,"index.html")

　　檢查瀏覽器的請求頭：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryaWl9k5ZMiTAzx3FT

 

關於django后端代碼接受上傳文件的方法