django实现文件上传,django获取上传的文件
简介Ajax(异步JavaScript和XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据是XML(当然传输的数据不仅仅是XML,现在更多使用的是json数据)。
同步:客户端发送请求后,需要等待服务器响应后再发送第二个请求;异步交互:客户端发送请求后,可以不等待服务器响应就发送第二个请求。除了AJAX的异步特性,还有一个:浏览器页面的部分刷新;(这个特性给用户的感觉是在不知不觉中完成了请求和响应的过程)
场景:
优点:AJAX使用Javascript技术向服务器发送异步请求。AJAX不需要刷新整个页面。
基于jquery的Ajax实现
按钮send_Ajax /button
脚本
$(.send _ Ajax’)。单击(函数(){
$.ajax({
URL:“/handle _ Ajax/”,
类型: POST ,
数据:{用户名:袁,密码:123},
成功:函数(数据){
console.log(数据)
},
错误:函数(jqXHR,textStatus,err) {
console.log(参数);
},
完成:函数(jqXHR,textStatus) {
console . log(text status);
},
状态代码:{
“403”:函数(jqXHR,textStatus,err) {
console.log(参数);
},
“400”:函数(jqXHR,textStatus,err) {
console.log(参数);
}
}
})
})
/脚本
Ajax-服务器-Ajax流程图
应用案例1 Ajax:注册表单中是否注册了用户名?当用户填写用户名并将光标移开时,它会自动向服务器发送一个异步请求。服务器返回真或假。true表示该用户名已经注册,false表示尚未注册。得到客户端服务器返回的结果后,确定是否在用户名文本框后显示错误信息“用户名已注册”!
2基于Ajax的登录验证:用户在表单中输入自己的用户名和密码,通过Ajax提交给服务器。验证后,服务器返回响应消息,客户端通过响应消息确定登录是否成功。如果成功,会跳转到首页,否则,页面会显示相应的错误信息。
文件上传请求头的内容类型内容类型是指请求体的编码类型。有三种常见类型:
1/x-www-form-urlencoded这应该是通过POST提交数据的最常见方式。浏览器的原生表单form,如果没有设置enctype属性,最终会以application/x-www-form-urlencoded的形式提交数据。该请求类似于以下内容(本文省略了不相关的请求头):
后http://www.example.com HTTP/1.1
content-Type:application/x-www-form-urlencoded;charset=utf-8
user=yuange=222 multi part/form-data这是另一种常见的POST数据提交方式。当我们使用表单上传文件时,我们必须使表单的enctype等于multipart/form-data。让我们直接看一个请求的例子:
后http://www.example.com HTTP/1.1
内容类型:多部分/形式数据;boundary=-webkitformboundaryrgkcby 7 qhfd 3 trwa
-webkitformboundaryrgkcby 7 qhfd 3 trwa
内容-处置:形式-数据;name=用户
元
-webkitformboundaryrgkcby 7 qhfd 3 trwa
内容-处置:形式-数据;name= filefilename=chrome.png
内容类型:图像/png
PNG.chrome.png的内容.
-webkitformboundaryrgkcby 7 qhfd 3 trwa-
这个例子稍微复杂一点。老师首先成为划分不同领域的边界。为了避免与正文重复,边界很长很复杂。那么Content-Type表示数据是由multipart/form-data编码的,这个请求的边界是什么。根据字段的数量,消息体被分成几个结构相似的部分。每个部分以- boundary开头,后面是内容描述信息,然后是enter,最后是字段的具体内容(文本或二进制)。如果要传输文件,还应该包括文件名和文件类型信息。消息体以- boundary -结尾。有关多部分/形式数据的详细定义,请访问rfc1867。
这种方法一般用于上传文件,各大服务器语言都很好的支持。
上面提到的POST数据的两种方法都是浏览器原生支持的,现阶段标准中的原生表单forms只支持这两种方法(由form元素的enctype属性指定,默认为application/x-www-form-urlencoded。其实enctype也支持text/plain,但是很少用)。
随着越来越多的网站,尤其是WebApp,都使用Ajax进行数据交互,我们完全可以定义新的数据提交方式,这将给开发带来更多的便利。
3/JSON Application/JSON这个Content-Type作为响应头大家都不陌生。其实现在越来越多的人用它作为请求头来告诉服务器消息体是序列化的JSON字符串。由于JSON规范的普及,除了较低版本的IE,各大浏览器都原生支持JSON.stringify,服务器端语言也有处理JSON的函数,所以你在使用JSON时不会遇到任何麻烦。
JSON格式支持比键值对复杂得多的结构化数据,这也很有用。记得几年前做项目的时候,要提交的资料层次很深。我只是将数据JSON序列化并提交。不过当时我用JSON string作为val,还是放在key-value对里,提交为x-www-form-urlencoded。
基于表单的文件上载模板的一部分form action= method= post enctype= multipart/form-data
用户名输入type=text name=user
头像类型=文件名称=头像
输入类型=提交
/窗体视图节
定义索引(请求):
Print(request.body) #原始请求正文数据
打印(请求。GET) #获取请求数据
打印(请求。POST) # POST请求数据
打印(请求。文件)#上传的文件数据
return render(request, index.html )
基于Ajax的文件上传模板
形式
用户名输入类型=text id=user
图像输入类型=文件 id=头像
输入类型=按钮 id=ajax-submit 值=ajax-submit
/表单
脚本
$(#ajax-submit )。单击(函数(){
var FormData=new FormData();
formdata.append(user ,$(#user )。val());
formdata.append(avatar_img ,$(#avatar)[0]。文件[0]);
$.ajax({
url: ,
类型: post ,
数据:formdata,
ProcessData: false,//不处理数据
ContentType: false,//没有设置内容类型
成功:函数(数据){
console.log(数据)
}
})
})
/脚本
视角
定义索引(请求):
if request.is_ajax():
Print(request.body) #原始请求正文数据
打印(请求。GET) #获取请求数据
打印(请求。POST) # POST请求数据
打印(请求。文件)#上传的文件数据
返回HttpResponse(“确定”)
return render(request, index.html )
检查浏览器的请求标题:
内容类型:多部分/形式数据;boundary=-webkitformboundaryawl 9k 5 zmitazx 3 ft
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。