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)格式化之后的数据了。
相关推荐
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo