ajax传送文件
Posted chanyuli
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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:pythonuntitled上课day62file_downloadhahaha'+'.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）格式化之后的数据了。
以上是关于ajax传送文件的主要内容，如果未能解决你的问题，请参考以下文章