文件上传简介

文件上传

请求头之contentType

ContentType指的是请求体的编码类型，常见的类型共有3种：application/x-www-form-urlencoded、 multipart/form-data、application/json

urlencoded

这应该是最常见的 POST 提交数据的方式了。浏览器的原生表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。

form-data

这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让表单的 enctype 等于 multipart/form-data

application/json

application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。记得我几年前做一个项目时，需要提交的数据层次非常深，我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val，仍然放在键值对里，以 x-www-form-urlencoded 方式提交。

基于form表单的文件上传

1、路由

re_path('^put_file/$',views.put_file),

2、视图函数

def put_file(request):
	if request.method == 'GET':
		return render(request,'put_file.html')
	if request.method == 'POST':
		print(request.POST)  #<QueryDict: {'user': ['123']}>
		print(request.FILES)  # #<MultiValueDict: {'avatar': [<InMemoryUploadedFile: 1.jpg (image/jpeg)>]}>
		#上传文件——默认传到程序的根目录
		#获取文件对象
		file_obj = request.FILES.get('avatar')
		#注意这里：file_obj.name，以二进制方式写入
		with open(file_obj.name,'wb') as f:
			for line in file_obj:
				f.write(line)
		return HttpResponse('OK!')

3、模板文件——put_file.html

<form action='' method='post'  enctype="multipart/form-data">
用户名： <input type="text" name="user"> </br></br>
文  件： <input type="file"  name="avatar"> </br></br>
<input type="submit">
</form>

基于Ajax的文件上传

1、路由

path('index',views.index),

2、视图函数

def index(request):
	if request.method == 'GET':
		return render(request,'index.html')

	if request.method == 'POST':
		#请求报文中的请求体
		print('body:',request.body)
		#仅contentType为urlencoded的时候才有值
		print('POST:',request.POST)  #<QueryDict: {'username': ['123']}>
		#文件
		print('FILES:',request.FILES)  #<MultiValueDict: {'avatar': [<InMemoryUploadedFile:1.jpg (image/jpeg)>]}>
		#上传文件的过程
		#获取文件对象
		#注意这里的avatar 是 模板文件  formdata.append('avatar',$('#avatar')[0].files[0]); 的值！
		file_obj = request.FILES.get('avatar')
		with open(file_obj.name,'wb') as f:
			for line in file_obj:
				f.write(line)
		return HttpResponse('OK')

3、模板文件——index.html

<form>
	用户名： <input type='text' id='username'> <br><br>
	图 片： <input type='file' id='avatar'> <br><br>
	<input type='button' id='btn' value='确认'> 
</form>


<script src="/static/jquery-1.12.4.js"></script>
<script>
	 $('#btn').click(function () {
    //这里是固定的格式，写在ajax之前
    var formdata = new FormData();
    formdata.append('username',$('#username').val());
    formdata.append('avatar',$('#avatar')[0].files[0]);
	
    $.ajax({
        url:'',
        type:'post',
		
        //注意下面这三条
        data:formdata,
        //用formdata处理用到下面两个参数————contentType、processData
        contentType:false,
        processData:false,
		
        success:function (data) {
            console.log(data)
        }
    })
})

</script>