Django中ajax技术和form表单两种方式向后端提交文件
2018-08-22 本文已影响106人
SlashBoyMr_wang
一、Form表单方式提交：
form表单提交文件或者图像时需要对form中的属性进行如下设置：
1、method="post" //提交方式 post
2、enctype="multipart/form-data" //不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
3、action="/code/" //提交给哪个url
code.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代码统计</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="/code/">
{% csrf_token %}
<input type="file" name="file" value="上传文件">
<button type="submit" id="btn">提交</button>
</form>
</body>
</html>
url
url(r'code/$',views.code)
views.py
def code(request):
if request.method == "POST":
filename = request.FILES['file'].name
with open(filename, 'wb') as f:
for chunk in request.FILES['file'].chunks():
f.write(chunk)
return HttpResponse('上传成功')
return render(request, 'code.html')
二、ajax方式提交文件：
直接上代码吧，代码有注释
code.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代码统计</title>
</head>
<body>
<form>
{% csrf_token %}
<input type="file" name="file" value="上传文件">
<button type="button" id="btn">提交</button>
</form>
<script src="/static/js/jquery-3.3.1.js"></script>
<script>
$("#btn").click(function () {
//创建一个FormData对象用来存储数据
var file_obj = new FormData;
//通过jquery的的属性操作找到上传的文件,
// 注意files方法是js对象的特有的方法，所以需要将jquery对象索引转化成js对象调用此方法
file_obj.append('file', $("input[type='file']")[0].files[0]);
//jquery的属性操作获取csrftoken值来防御CSRF攻击
file_obj.append('csrfmiddlewaretoken', $('[name=csrfmiddlewaretoken]').val());
$.ajax({
url: '/code/',
type: 'post',
processData: false,//不让jQuery处理我的file_obj
contentType: false,//不让jQuery设置请求的内容类型
data: file_obj,
//成功回调函数
success: function (res) {
console.log(res.msg)
}
})
})
</script>
</body>
</html>
url:
url(r'code/$',views.code)
views.py:
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
def code(request):
res={'code':0}
if request.method == "POST":
file_obj = request.FILES['file']
filename = file_obj.name
with open(filename, 'wb') as f:
for chunk in file_obj.chunks():
f.write(chunk)
res['msg'] = '上传成功'
return JsonResponse(res)
return render(request, 'code.html')
