一.请求头ContentType
ContentType指的是请求体的编码类型,常见的类型共有三种:
1.application/x-www-form-urlencoded
这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 默认格式application/x-www-form-urlencoded 方式提交数据，ajax默认也是这个。请求类似于下面这样（无关的请求头在本文中都省略掉了）：
POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8
user=robertx&age=22
这就是上面这种contenttype规定的数据格式，后端对应这个格式来解析获取数据，不论是get方法还是post方法，都是这样拼接数据，是公认的一种数据格式，但是如果contentType指定的是urlencoded类型，但是post请求体里面的数据是json的格式，那么就出错了，服务端没法解开数据。
2.multipart/form-data
使用表单上传文件时，必须让 表单的 enctype 等于 multipart/form-data，form表单不支持发json类型的contenttype格式的数据，而ajax什么格式都可以发，也是ajax应用广泛的一个原因。
示例如下
POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"
robertx
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后 Content-Type 里指明了数据是以 multipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 --boundary 开始，紧接着是内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 标示结束。关于 multipart/form-data 的详细定义，请前往 rfc1867 查看。这种方式一般用来上传文件，各大服务端语言对它也有着良好的支持。
上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段标准中原生 <form> 表单也只支持这两种方式（通过 <form> 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用得非常少）。
随着越来越多的 Web 站点，尤其是 WebApp，全部使用 Ajax 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利。
3. application/json
把它作为请求头，可以用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。
JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。如果项目需要提交的数据层次非常深，可以把数据 JSON 序列化之后来提交。另一种思路是把 JSON 字符串作为 val，仍然放在键值对里，以 x-www-form-urlencoded 方式提交。
如果在ajax里面写上这个contenttype类型，那么data参数对应的数据，就不能是个object类型数据了，必须是json字符串，contenttype:'json'，简写一个json，它也能识别是application/json类型
$.ajax({
url:"{% url 'home' %}",
type:'post',
headers:{
"X-CSRFToken":$.cookie('csrftoken'),
contentType:'json',
},
data:JSON.stringify({
name:name,
//csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()，
}),
success:function (response) {
}
})
如果我们发送的是json数据格式的数据，那么csrf_token就不能直接写在data里面了，没有效果，必须通过csrf的方式3的形式来写，写在hearders（请求头，可以写一些自定制的请求头）里面，注意，其实contentType也是headers里面的一部分，写在里面外面都可以
二.文件上传
1.基于form表单的文件上传
模版部分
enctype="multipart/form-data" 其他两种contentType都是键值的形式发送数据，这种form_data的格式一般是把大数据一段一段隔开的,注意form表单要加上enctype属性
<form action="" method="post" enctype="multipart/form-data">
用户名 <input type="text" name="user">
图片 <input type="file" name="file_obj">
<input type="submit">
</form>
如果不用form_data格式来发，那么默认的urlencoded的格式，图片标签的数据会组成file_obj:文件名字来进行发送
视图部分
可以用下面的方法来查看请求体内容
print(request.body) # 原始的请求体数据,这个方法在查看文件上传的数据时会报错
print(request.GET) # GET请求数据
print(request.POST) # POST请求数据
print(request.FILES) # 上传的文件数据
views.py
import os
from django.shortcuts import render,HttpResponse,redirect
from upload import settings # upload是我的项目名称,为了引入BASE_DIR组成路径
# Create your views here.
def upload(request):
if request.method == 'GET':
return render(request,'upload.html')
else:
username = request.POST.get('username') #获取文件名
file_obj = request.FILES.get('file_obj') # 获得文件句柄
print(request.FILES)
print(username)
print(file_obj,type(file_obj))
#<class 'django.core.files.uploadedfile.InMemoryUploadedFile'>
from django.core.files.uploadedfile import InMemoryUploadedFile
file_name = file_obj.name # 获得文件名字
path = os.path.join(settings.BASE_DIR,'statics','img',file_name)
with open(path,'wb') as f:
# 读取文件形式
for i in file_obj:
f.write(i)
# 也可用django提供的chunks方法读取,尽量用这种方式,因为这种方式可控
# for chunk in file_obj.chunks(): # 默认一次上传的大小为65536b即64kb,最大为2.5MB一次
# f.write(chunk)
return HttpResponse('ok')
2.基于Ajax的文件上传
模版
通过文件标签找到上传的文件
首先要找到上传的文件
$('input[type=file]')[0].files[0]; // 找到文件ajax上传文件的时候，需要这个类型，它会将添加给它的键值对加工成formdata的类型
var formdata=new FormData();ajax请求时一定要加上这两段代码
processData: false , // 不处理数据
contentType: false, // 不设置内容类型
upload.html
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="d1" style="margin-top: 100px;"></div>
{% csrf_token %}
<div>
用户名: <input type="text" name="username">
</div>
<div>
文件: <input type="file" name="file_obj">
</div>
<button id="sub">上传</button>
</div>
</div>
</div>
</body>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/jquery.cookie.js' %}"></script>
<script>
$('#sub').click(function () {
var name = $('input[name=username]').val();
var file = $('input[type=file]')[0].files[0]; // 找到文件
var csrf = $('input[name=csrfmiddlewaretoken]').val();
var formdata = new FormData(); // ajax上传文件的时候，需要这个类型
formdata.append('username',name); //request.POST.get('username');
formdata.append('file_obj',file); //request.FILES.get('file_obj');
formdata.append('csrfmiddlewaretoken',csrf);
$.ajax({
url:"{% url 'upload' %}",
type:'post',
data:formdata,
processData: false , // 不处理数据
contentType: false, // 不设置内容类型
//headers:{
// 'X-CSRFToken':$.cookie('csrftoken'),
//},
success:function (response) {
console.log(response);
}
})
})
</script>
视图部分
其实不论是使用form表单传文件还是使用ajax的方式,后端的代码是一样的
views.py
import os
from django.shortcuts import render,HttpResponse,redirect
from upload import settings
# Create your views here.
def upload(request):
if request.method == 'GET':
return render(request,'upload.html')
else:
username = request.POST.get('username') #root
file_obj = request.FILES.get('file_obj')
print(request.FILES)
print(username)
print(file_obj,type(file_obj))
#<class 'django.core.files.uploadedfile.InMemoryUploadedFile'>
from django.core.files.uploadedfile import InMemoryUploadedFile
file_name = file_obj.name
path = os.path.join(settings.BASE_DIR,'statics','img',file_name)
with open(path,'wb') as f:
#读取文件形式
for i in file_obj:
f.write(i)
# for chunk in file_obj.chunks():
# f.write(chunk)
return HttpResponse('ok')