ajax傳送文件


ajax傳送文件

ajax傳文件需要注意的事項

1、利用formdata對象 能夠簡單的快速的從前端傳輸數據 (普通鍵值 +文件),這就是阿賈克斯的優勢了。不用分開傳了。

2、有幾個參數 :

​ 1.data:formdata對象

​ 2.contentType:false

​ 3.processData:false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<input type="text" name="username" id="t1">
<input type="text" name="password" id="t2">
<input type="file" name="myfile" id="t3">
<button id="b1">提交</button>

<script>
    $('#b1').click(function () {
        // 1.先生成一個formdata對象
        var myFormData = new FormData();
        // 2.朝對象中添加普通的鍵值
        myFormData.append('username',$("#t1").val());
        myFormData.append('password',$("#t2").val());
        // 3.朝對象中添加文件數據
        // 1.先通過jquery查找到該標簽
        // 2.將jquery對象轉換成原生的js對象
        // 3.利用原生js對象的方法 直接獲取文件內容
        myFormData.append('myfile',$('#t3')[0].files[0]);
        $.ajax({
            url:'',
            type:'post',
            data:myFormData,  // 直接丟對象
            // ajax傳文件 一定要指定兩個關鍵性的參數
            contentType:false,  // 不用任何編碼 因為formdata對象自帶編碼 django能夠識別該對象
            processData:false,  // 告訴瀏覽器不要處理我的數據 直接發就行
            success:function (data) {
                alert(data)
            }
        })
    })
</script>

</body>

</html>

這里講述一下自己愚蠢的踩坑:

既然發送過來了一個文件了,那我就持久化存儲一下吧。腦海里開始思索如何保存文件,讀取文件等相關知識,發現空盪盪的!

def upload(request):
    files = request.FILES.get('myfile')

    print(request.FILES)
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            with open(r'D:\python\untitled\上課\day62\file_download\hahaha'+'.py','wb')as fw:
                for f in files:
                    fw.write(f)
            return HttpResponse('收到了 dsb')

    return render(request,'upload.html')

再提醒自己一下,讀文件,一定是文件,而不是文件夾之類的東西,寫文件,路徑要是不存在的文件,他會自己創建一個文件,如果是存在文件,將會被覆蓋!

而且最重要的點是,request.FILES不是直接我們要的文件,而是一個

<class 'django.utils.datastructures.MultiValueDict'>字典,是啥我也不知道,總之需要我們get出來。然后才是二進制類型的文件了。

序列化組件

我們之前往前端傳數據,是直接從數據庫查詢出來的一大堆對象,然后丟給前段,前端自己取,這是django支持的,但是要考慮到以后開發,前端不一定會跟你兼容,所以這時候就要使用大家都兼容的數據格式,json。

所以我們要寫成一個列表套字典的形式傳給前端,但是用手寫會變得非常麻煩,於是就有了一個目前還比較low的模塊,但是勝過手寫。

序列化他不只是單單的dumps。

from app01 import models
from django.core import serializers #這個模塊用來序列化
def ser(request):
    user_queryset = models.Userinfo.objects.all()
    res = serializers.serialize('json',user_queryset)#前一個參數告訴這個方法要序列化成什么類型的數據,后面的參數就是你要序列化的數據。
    print(res)
    return render(request,'ser.html',locals())
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>
<body>
{{ res }}
</body>
</html>

前段文件

[{
	"model": "app01.userinfo",
	"pk": 1,
	"fields": {
		"username": "chanyuli",
		"password": 123,
		"gender": 1
	}
}, {
	"model": "app01.userinfo",
	"pk": 2,
	"fields": {
		"username": "tank",
		"password": 321,
		"gender": 1
	}
}, {
	"model": "app01.userinfo",
	"pk": 3,
	"fields": {
		"username": "ax",
		"password": 720,
		"gender": 2
	}
}]

以上就是前段接受到的數據經過json校驗格式化工具(bejson)格式化之后的數據了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM