Ajax實現文件的上傳

時間 2019-11-16

標籤 ajax 實現文件上傳欄目 Ajax 简体版

原文原文鏈接

Ajax實現文件的上傳

準備

ajax的參數補充

type不寫的話默認是GETcss

dataType和ContentType：html

　　　　dataType: 瀏覽器發給服務器但願返回的數據類型。。jquery

若是明確地指定目標類型，就可使用data Type。ajax

　　　　ContentType: 　　　　　　請求頭裏有：瀏覽器告訴服務器內容的類型django

　　　　　　響應頭裏也有：服務器響應瀏覽器的內容json

JS和JQuery之間的轉換

jQuery對象加[0]就轉換成了dom對象瀏覽器

dom對象加$符就轉換成了jquery對象服務器

processDate

processDate 默認爲True ，預處理；若是改成False，不作預處理cookie

csrf跨站請求僞造

若是把type:"GET" 改成type:"POST" 會報一個Forbidden的錯app

解決辦法有三種：

方式一：

     $.ajaxSetup({
           data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
       });
     注意：要放在ajax請求的前面，在發送以前組裝一組字符串，在第一步render的時候就發了
     因此有侷限性：
       若是把JS代碼放到靜態文件中，不會渲染，不會執行{{csrf_token}},只能在HTML頁面中使用

方式二：本身組裝一組鍵值對（推薦）

<form>
{% csrf_token %}
</form>
 data:{
       csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
       name:$(":text").val(),
       pwd:$(":password").val()
 },

方式三：本身設置頭信息

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

 $.ajax({
           url:"/serialize/",
           type:"POST",
           headers:{"X-CSRFToken":$.cookie('csrftoken')},
       })

JQuery.serialize()

serialize()函數用於序列化一組表單元素，將表單內容編碼爲用於提交的字符串。

serialize()函數經常使用於將表單內容序列化，以便用於AJAX提交。

該函數主要根據用於提交的有效表單控件的name和value，將它們拼接爲一個可直接用於表單提交的文本

字符串，該字符串已通過標準的URL編碼處理(字符集編碼爲UTF-8)。

該函數不會序列化不須要提交的表單控件，這和常規的表單提交行爲是一致的。例如：不在<form>標籤內

的表單控件不會被提交、沒有name屬性的表單控件不會被提交、帶有disabled屬性的表單控件不會被提

交、沒有被選中的表單控件不會被提交。

與常規表單提交不同的是：常規表單通常會提交帶有name的按鈕控件，而serialize()函數不會序列化帶有name的按鈕控件。更多詳情請點擊這裏。

語法：

jQueryObject.serialize( )

serialize()函數的返回值爲String類型，返回將表單元素編碼後的可用於表單提交的文本字符串。

請參考下面這段初始HTML代碼：

<form name="myForm" action="http://www.365mini.com" method="post">
   <input name="uid" type="hidden" value="1" />
   <input name="username" type="text" value="張三" />
   <input name="password" type="text" value="123456" />
   <select name="grade" id="grade">
       <option value="1">一年級</option>
       <option value="2">二年級</option>
       <option value="3" selected="selected">三年級</option>
       <option value="4">四年級</option>
       <option value="5">五年級</option>
       <option value="6">六年級</option>
   </select>
   <input name="sex" type="radio" checked="checked" value="1" />男
   <input name="sex" type="radio" value="0" />女
   <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
   <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
   <input name="hobby" type="checkbox" value="3" />羽毛球
   <input name="btn" id="btn" type="button" value="點擊" />
</form>

對<form>元素進行序列化能夠直接序列化其內部的全部表單元素。

// 序列化<form>內的全部表單元素
// 序列化後的結果：uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

咱們也能夠直接對部分表單元素進行序列化。

// 序列化全部的text、select、checkbox表單元素
// 序列化後的結果：username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );

示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width">
 7     <title>Title</title>
 8 </head>
 9 <body>
10 <form name="myForm" action="http://www.365mini.com" method="post">
11     <input name="uid" type="hidden" value="1" />
12     <input name="username" type="text" value="張三" />
13     <input name="password" type="text" value="123456" />
14     <select name="grade" id="grade">
15         <option value="1">一年級</option>
16         <option value="2">二年級</option>
17         <option value="3" selected="selected">三年級</option>
18         <option value="4">四年級</option>
19         <option value="5">五年級</option>
20         <option value="6">六年級</option>
21     </select>
22     <input name="sex" type="radio" checked="checked" value="1" />男
23     <input name="sex" type="radio" value="0" />女
24     <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
25     <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
26     <input name="hobby" type="checkbox" value="3" />羽毛球
27     <input name="btn" id="btn" type="button" value="點擊" />
28 </form>
29 <script src="/static/jquery-3.2.1.min.js"></script>
30 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
31 <script>
32     $("#btn").click(function () {
33 {#       方式一#}
34         //$.ajaxSetup({
35           // data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
36         //});
37         $.ajax({
38             url:"/serialize/",
39             type:"POST",
40 {#           方式三#}
41             headers:{"X-CSRFToken":$.cookie('csrftoken')},
42             //data:$("form").serialize(),   //序列form表單全部的
43             data:$(":text,:password,:checkbox").serialize(), //序列本身選擇的
44             success:function (data) {
45                 var data=JSON.parse(data); //js中的反序列化
46                 console.log(data);
47                 console.log(typeof data);
48                 $(".error").html(data);
49             }
50         })
51     })
52 </script>
53 </body>
54 </html>

1 def serialize(request):
2     # form = request.POST
3     # print(form)
4     name = request.POST.get("username")
5     password = request.POST.get("password")
6     checked = request.POST.getlist("hobby")
7     print(name,password,checked)
8     return HttpResponse(json.dumps(name))

當有好多input的時候，就得一一對應的吧全部的數據發過去的，這樣顯得麻煩，咱們用序列化
jQuery.serialize()

data:$("form").serialize(),   //序列form表單全部的
data:$(":text,:password,:checkbox").serialize(), //序列本身選擇的

在服務端獲取數據
form = request.POST   
print(form)   #獲取全部
name = request.POST.get("username")
password = request.POST.get("password")
checked = request.POST.getlist("hobby")
print(name,password,checked)#獲取單個

文件上傳：

一、Form表單上傳文件

文件和其餘的數據類型不同，是一個二進制的形式 Form上傳文件的時候切記要加上：enctype="multipart/form-data"

formupload.html

<form action="/formupload/" method="post" enctype="multipart/form-data">
   {% csrf_token %}
   <p>姓名：<input type="text" name="username"></p>
   <p>密碼：<input type="password" name="password"></p>
   <p>頭像：<input type="file" name="file"></p>
   <p><input type="submit" value="提交"></p>
</form>

view.py

def formupload(request):
   if request.method == "POST":
       username = request.POST.get("username")
       password = request.POST.get("password")
       # file = request.FILES   #拿到的是一個句柄
       file_obj = request.FILES.get("file")
       print(file_obj,file_obj.name)
       print(type(file_obj),type(file_obj.name))   #<class 'django.core.files.uploadedfile.InMemoryUploadedFile'>   <class 'str'>
       with open(file_obj.name,"wb") as f:
           for i in file_obj:
               f.write(i)
       return HttpResponse("上傳成功...")
   return render(request,"formupload.html")

二、Ajax上傳文件（利用FormData）：*既能夠處理二進制，又能夠處理字典，列表啊等*

FormData是什麼呢？

XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,咱們能夠經過JavaScript用

一些鍵值對來模擬一系列表單控件,咱們還可使用XMLHttpRequest的send()方法來異步的提交這個"表

單".比起普通的ajax,使用FormData的最大優勢就是咱們能夠異步上傳一個二進制文件.

全部主流瀏覽器的較新版本都已經支持這個對象了，好比Chrome 7+、Firefox 4+、IE 10+、Opera 12+、

Safari 5+。

注意：下文中的幾個須要解釋的

$("#upload") 拿到的是一個集合
$("#upload")[0] 就是一個dom對象
$("#upload")[0].files   拿到的是一個filelist
$("#upload")[0].files[0] 拿到的是當前最近的文件對象

要是使用FormData必定要加上：

必定要加上：

　　contentType：false 　　processDate：false #不作預處理

ajaxupload.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width">
   <title>Title</title>
</head>
<body>
<p>姓名<input type="text" name="username"></p>
<p>頭像<input type="file" id="upload"></p>
<p><button class="btnnn">提交</button><span class="tishi"></span></p>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
   $(".btnnn").click(function () {
         var formData=new FormData();
       formData.append("username",$(":text").val());
       formData.append("file",$("#upload")[0].files[0]);
       $.ajax({
           url:"/get_upload/",
           type:"POST",
           headers:{"X-CSRFToken":$.cookie('csrftoken')},
           data:formData,
           contentType:false,
           processData:false,
           success:function (data) {
               $(".tishi").html("上傳成功")
           }

       })
   })
</script>
</body>
</html>

view.py

def ajaxupload(request):
   return render(request,"ajaxupload.html")

def get_upload(request):
   if request.method == "POST":
       print("FIFLE", request.FILES)
       file_obj = request.FILES.get("file")
       print(file_obj.name, "-----")
       file_obj = request.FILES.get("file")
       with open(file_obj.name, "wb") as f:
           for i in file_obj:
               f.write(i)
       return HttpResponse("上傳成功")