本文主要是介绍day54 Django ajax和form表单上传文件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
day54 Django ajax和form表单上传文件
ajax
特点
- 局部刷新
- 异步请求
写法
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>登录页面</h1>
{##}
{#<form action="" method="post">#}
{# {% csrf_token %}#}
{# 用户名: <input type="text" name="username">#}
{# 密码: <input type="text" name="password">#}
{# <input type="submit">#}
{#</form>#}{% csrf_token %}
<hr>
用户名: <input type="text" id="uname">
密码: <input type="password" id="pwd">
<button id="sub">提交</button>
<span id="error" style="color:red;font-size: 12px;"></span>
</body><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
{#<script src="{% static 'js/xx.js' %}"></script>#}
<script>$('#sub').click(function () {var uname = $('#uname').val();var pwd = $('#pwd').val();var xxx = $('[name="csrfmiddlewaretoken"]').val();$.ajax({url:'{% url "login" %}',请求路径type:'post', #请求方法data:{'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':xxx}, 请求数据,不需要携带数据的请求,不需要写data参数success:function (res) {console.log('>>>>',res); #res参数拿到的是响应数据if (res !== 'ok'){$('#error').text('用户名或者密码有误!')}else {location.href='/home/';}}})})</script></html>
ajax通过csrf_token认证
方式1
通过找到csrf逻辑经过模板渲染后生成的input标签，获取到csrf token 的值。
hmtl代码
Ajax可以直接提交数据，所以不需要将input标签包裹在form标签之中。
{% csrf_token %}
用户名: <input type="text" id="uname">
密码: <input type="password" id="pwd">
<button id="sub">提交</button>
js代码
$('#sub').click(function () {var uname = $('#uname').val();var pwd = $('#pwd').val();// 获取到{% csrf_token %}这个模板渲染语法渲染之后的input标签对应的值var xxx = $('[name="csrfmiddlewaretoken"]').val();$.ajax({url:'{% url "login" %}', // 127.0.0.1:8000/login/type:'post',// 给post请求提交的数据中添加上csrf_token认证所需要的键值对data:{'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':xxx},success:function (res) {console.log('>>>>',res);if (res !== 'ok'){$('#error').text('用户名或者密码有误!')}else {location.href='/home/';}}
})
})
方式2
data数据部分的csrf_token认证的键值对的值直接写{{ csrf_token }}，经过模板渲染之后，它直接就是那个input标签的value值。
html代码
同样，不需要将input标签包裹在form标签中。
用户名: <input type="text" id="uname">
密码: <input type="password" id="pwd">
<button id="sub">提交</button>
js代码
$('#sub').click(function () {var uname = $('#uname').val();var pwd = $('#pwd').val();$.ajax({url:'{% url "login" %}', // 127.0.0.1:8000/login/type:'post',// 需要注意的是：经过模板渲染后的内容时不会带引号的，需要我们手动给csrf token加引号，表示这是一个字符串，否则将会按照变量来解析，从而出错。data:{'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':'{{ csrf_token }}'},success:function (res) {console.log('>>>>',res);if (res !== 'ok'){$('#error').text('用户名或者密码有误!')}else {location.href='/home/';}}})
})
form表单上传文件
在默认情况下，form 表单是无法传输文件的。即便我们在 HTML 中写了 type 类型为 file 的 input 标签。这是因为 HTML 默认的表单传输方法为 application/x-www-form-urlencoded。但是这种方法是不能传输文件的。用这种方法传输文件时，我们只能在后端看到文件名，而得不到整个文件。
Views 视图函数尝试打印获取到的文件和 POST 数据时，结果如下：
<MultiValueDict: {}>
<QueryDict: {'csrfmiddlewaretoken': ['jEKPQOvvCeD4q96ET9zVU5xBTdlgmbgPQb7c5EhvNsrYdT8L4KBw8IuBTmlFOUwj'], 'avata': ['1571311850334.png']}>
这时，我们就要将HTML代码中的 form 表单标签加上 enctype="multipart/form-data" 的属性要写才能上传文件，其本质时修改 content-type 请求头中的携带数据的消息格式：
<form action="" method="post" enctype="multipart/form-data">{% csrf_token %}用户名:<input type="text" name="username">头像: <input type="file" name="file_obj"><input type="submit">
</form>
views 视图函数写法：
def upload(request):if request.method == 'GET':return render(request,'upload.html')else:print(request.POST)print(request.FILES)file_obj = request.FILES.get('file_obj') # FILES 是一个类似于字典的对象，file_obj（也就是HTML文件input标签中的name属性值）对应的值才是文件对象print(file_obj.name)with open(file_obj.name,'wb') as f:# for i in file_obj:# f.write(i)for i in file_obj.chunks(): #65536字节f.write(i)return HttpResponse('ok')
当设置好 form 标签的 enctype 属性后，文件就会顺利传到视图函数中了：
<MultiValueDict: {'avata': [<InMemoryUploadedFile: 1571311850334.png (image/png)>]}>
<QueryDict: {'csrfmiddlewaretoken': ['QTtPqw8y7nldamyW4uZzY6m5yzHglvGMnqQcFmUyiB97X6A3f51acJj5yIHFNeWg']}>
得到的 file_obj 是一个文件对象，与文件句柄类似。我们可以通过直接 for 循环文件句柄的方式，将文件逐行写入本地。但是如果文件的每一行都比较长，比如图片之类的媒体文件，或许只有一行，如果我们还使用逐行写入的话，会占用很多的内存资源。于是更推荐使用 for 循环 file_obj.chunks() ，这样每次只会循环 65536 个字节的内容，从而缓解内存的压力。
这篇关于day54 Django ajax和form表单上传文件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
