python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，
python_way day21
1、Django文件上传至Form方式
2、原生Ajax文件上传提交表单
使用原生Ajax好处：不依赖jquery，在发送一个很小的文件或者字符串的时候就可以用原生Ajax直接发送
一、Django文件上传至Form方式
<body>
<div>
<form action="/upload/" method="POST" enctype="multipart/form-data">
<!-- enctype="multipart/form-data" 这个字段上传文件必须写上，不写就传不上去。 -->
<input type="text" id="user" name="user" />
<input type="file" name="img">
<input type="submit" value="提交">
</form>
</div>
def upload(request):
if request.method == "POST":
user = request.POST.get("user", None)
img = request.FILES.get("img", None) #表示用户在前段上传的文件，去获取这个文件
print(img,type(img),"<--------") #此时就拿到了文件的对象，但是显示是显示文件名
f = open(os.path.join('statics', img.name), "wb")
for file in img.chunks():
f.write(file)
f.close()return render(request,"upload.html")
1、文件名： #img.name文件的名字，这里的作用是存放到本地的名字（打开文件的名字）
2、存放位置： f = open(os.path.join('statics', img.name), "wb")，这样就把文件放到了statics目录中，并且文件名字和上传名字相同。
倒入文件类型的类，看看里面有什么方法： from django.core.files.uploadedfile import InMemoryUploadedFile
打印内容：
IMG_8409.JPG 显示获取到的img是文件名字，其实是个文件对象
<class 'django.core.files.uploadedfile.InMemoryUploadedFile'>
我们倒入这个对象看看里面有什么方法可以供我们使用
def __init__(self, file, field_name, name, content_type, size, charset, content_type_extra=None):
super(InMemoryUploadedFile, self).__init__(file, name, content_type, size, charset, content_type_extra) chunks：将用户给的文件分片传递过来。
def chunks(self, chunk_size=None):
self.file.seek(0)
yield self.read() 属性：name，获取文件名，size大小等等
二、原生Ajax提交表单
使用原生Ajax好处：不依赖jquery，在发送一个很小的文件或者字符串的时候就可以用原生Ajax直接发送
我们经常使用的jquery中的ajax是调用的浏览器中一个XMLHttpRequrst()，这个对象就有发送ajax的能力
XMLHttpRequrst() 这个就是原生的Ajax
1、原生Ajax XmlHttpRequest对象的主要方法：
a. void open(String method,String url,Boolen async)
用于创建请求 （上传文件的位置，方式） async：异步请求 参数：
method： 请求方式（字符串类型），如：POST、GET、DELETE...
url： 要请求的地址（字符串类型）
async： 是否异步（布尔类型） b. void send(String body)
用于发送请求，（要发送的数据是什么） 参数：
body： 要发送的数据（字符串类型） c. void setRequestHeader(String header,String value)
用于设置请求头 参数：
header： 请求头的key（字符串类型）
vlaue： 请求头的value（字符串类型） d. String getAllResponseHeaders()
获取所有响应头 返回值：
响应头数据（字符串类型） e. String getResponseHeader(String header)
获取响应头中指定header的值 参数：
header： 响应头的key（字符串类型） 返回值：
响应头中指定的header对应的值 f. void abort() 终止请求
注：请求头和请求内容中间会隔两个换行
2、XmlHttpRequest对象的主要属性：
a. Number readyState
状态值（整数） 详细：
0-未初始化，尚未调用open()方法；
1-启动，调用了open()方法，未调用send()方法；
2-发送，已经调用了send()方法，未接收到响应；
3-接收，已经接收到部分响应数据；
4-完成，已经接收到全部响应数据； b. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数（回调函数） c. String responseText #获取相应内容
服务器返回的数据（字符串类型） d. XmlDocument responseXML
服务器返回的数据（Xml对象） e. Number states
状态码（整数），如：200、404... f. String statesText
状态文本（字符串），如：OK、NotFound...
使用示例：
get形式发送
function UploadFile() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () { // onreadystatechange 这个函数在传送信息每次状态发生改变时就会被触发，状态一共有4种：
if(xhr.readyState == 4){
var data = xhr.responseText; //获取服务器端响应的内容
console.log(data);
}
};
xhr.open("post", '/upload/', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); #设置请求头
xhr.send("k1=v1;k2=v2");
//如果要是发送POST请求，就要设置请求头
}
基础的原生post请求
function UploadFile() {
var form = new FormData();
form.append("user","alex");
form.append("pwd","");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () { // onreadystatechange 这个函数在传送信息每次状态发生改变时就会被触发，状态一共有4种：
if(xhr.readyState == 4){
var data = xhr.responseText; //获取服务器端响应的内容
console.log(data);
}
};
xhr.open("post", '/upload/', true);
//使用formdata对象发送时就不用设置请求头。
xhr.send(form);
}
原生ajax使用formdata发送字符串
formdata包含了上面发送字符串的功能，也含有发送文件的功能。
function UploadFile(){
var fileObj = $('#img')[0].files[0]; //使用ajax获取id为img对象使用[0]转换为dom对象，然后获取files对象
var form = new FormData();
form.append('img',fileObj);
form.append('user','alex');
$.ajax({
type:'POST',
url:'/upload/',
data: form, //发送form对象的时候就不需要ajax内部设置请求头
processData: false, //告诉jquery不要处理数据
contentType: false, //告诉jquery不要在请求头中设置获取发送的内容
success : function (arg) {
console.log(arg)
}
})
}
原生ajax使用formdata对象发送文件
<div>
<input type="text" id="user" name="user" />
<input type="file" id="img" name="img" onchange="UploadFile2();">
<a href="javascript:void(0)" onclick="UploadFile1();">jquery点击上传</a>
</div>
<script src="/statics/jquery-3.1.0.min.js"></script>
<script>
function UploadFile1(){
var fileObj = $('#img')[0].files[0]; //使用ajax获取id为img对象使用[0]转换为dom对象，然后获取files对象
var form = new FormData();
form.append('img',fileObj);
form.append('user','alex');
$.ajax({
type:'POST',
url:'/upload/',
data: form, //发送form对象的时候就不需要ajax内部设置请求头
processData: false, //告诉jquery不要处理数据
contentType: false, //告诉jquery不要在请求头中设置获取发送的内容
success : function (arg) {
console.log(arg)
}
})
}
<script />
使用jquery发送文件，还是需要formdata
有些阅览器不支持formdata对象，就不能所以就需要使用iframe伪ajax请求
iframe原来的作用：直接可以把别人的页面嵌套在标签内。
iframe的格式是一个新的doc
def upload_ifream(request):
if request.method == "POST":
ret = {"status":False, "data":None, "error":None}
try:
user = request.POST.get("user", None)
img = request.FILES.get("img", None)
print(img)
file_path = os.path.join("statics", img.name)
f = open(file_path, "wb")
for file in img.chunks():
f.write(file)
f.close()
ret["status"] = True
ret["data"] = file_path
except Exception as e:
ret["error"] = str(e)
return HttpResponse(json.dumps(ret))
return render(request,"upload.html")
views.py
<style> //样式：为图片预览展示规定大小
.img {
width: 300px;
height: 500px;
}
</style>
<body>
<div>
<iframe id="iframe" name="my_iframe" style="display: none;"></iframe>
<form action="/upload_ifream/" id="fo" method="POST" enctype="multipart/form-data">
<!-- enctype="multipart/form-data" 这个字段上传文件必须写上，不写就传不上去。 -->
<input type="text" id="user" name="user" />
<input type="file" id="img" name="img" onchange="UploadFile2();">
</form>
<div id="container"></div> //这里是用来做图片预览展示的。 </div>
<script src="/statics/jquery-3.1.0.min.js"></script>
<script>
function UploadFile2(){
$(container).find('img').remove(); //删除原来上传的图片。
document.getElementById('iframe').onload = callback; // 找到iframe标签 绑定一个加载事件。上传成功后执行callback函数
document.getElementById('fo').target = "my_iframe"; //找到id为fo的form标签把他提交的路径指向name为my_iframe的iframe标签
document.getElementById('fo').submit(); //通过js提交表单
}
function callback() {
var text = $("#iframe").contents().find('body').text();//因为iframe中嵌套了一个html页面，所以找他的子孙的时候需要加上contents这个方法
var json_data = JSON.parse(text); //获取json_data服务器返回的内容。并且注明是json格式
if(json_data.status){
//已经上传成功
var tag = document.createElement('img');//创建img标签
tag.src = "/" + json_data.data;
tag.className = "img";
$("#container").append(tag);
}else{
alert(json_data.error)
}
}
</script>
python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，的更多相关文章
- jQuery ajax submit form 被拦截问题的解决
一般情况下用js或jquery的submit方法提交form表单是不会被浏览器拦截的,但是发现异步的情况下用js提交form表单就会被浏览器拦截,这样就对功能的实现带来了很多的麻烦.网上看了好多都是同 ...
- 文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）
服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...
- Django 10 GET和POST（HttpRequest对象，GET和POST请求，文件上传，HttpResponse对象的cookie）
Django 10 GET和POST(HttpRequest对象,GET和POST请求,文件上传,HttpResponse对象的cookie) 一.HttpRequest对象 #HttpRequest ...
- 使用ajax提交form表单，包括ajax文件上传
前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...
- 使用ajax提交form表单，包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...
- 通过Ajax提交form表单来提交上传文件
Ajax 提交form方式可以将form表单序列化 然后将数据通过data提交至后台,例如: $.ajax({ url : "http://localhost:8080/" ...
- Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
- PHP 后台程序配置config文件，及form表单上传文件
一,配置config文件 1获取config.php文件数组, 2获取form 表单提交的值 3保存更新config.php文件,代码如下: $color=$_POST['color']; $back ...
- 使用ajax提交form表单，包括ajax文件上传【转载】
[使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...
随机推荐
- mybatis 相关总结
1. Mybatis的<where><foreach><set>等标签详解:http://blog.csdn.net/zenson_g/article/detail ...
- 关闭 Windows 的常用端口
netstat -ano 可以看到目前开着哪些端口 netstat -ano|findstr <端口号> 可以找到开放的端口的那条,最后还列出了 PID. 然后到任务管理器中,你可以查 ...
- 记一个由MemCached引发的性能问题
最近有个项目用loadrunner做了压力测试,发现并发量还不到200服务器就支撑不住了.boss那边紧急开会,说此项目最近3个月内将有100家中大型公司用于校园招聘工作,如果这个问题不解决公司有可能 ...
- minio-dotnet --云存储服务
inio是一家成立于2014年的生产开源云存储产品的新兴创业公司.这家创业公司是其创始人继Gluester之后的又一杰作,Gluester公司已经在2011年被Red Hat公司以1.36亿美元的价格 ...
- Runloop应用实例
AFNetworking AFURLConnectionOperation 这个类是基于 NSURLConnection 构建的,其希望能在后台线程接收 Delegate 回调.为此 AFNetwor ...
- oracle查看表占磁盘大小
select segment_name, bytes/1024/1024 from user_segments S where S.segment_type = 'TABLE' AND S.segme ...
- SQL-字符串合并
create table tb(id int, value varchar(10)) insert into tb values(1, 'aa') insert into tb values(1, ...
- u Calculate e 分类： HDU 2015-06-19 22:18 14人阅读 评论(0) 收藏
u Calculate e Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- JAVA基础知识之多线程——线程的生命周期（状态）
线程有五个状态,分别是新建(New).就绪(Runnable).运行(Running).阻塞(Blocked)和死亡(Dead). 新建和就绪 程序使用new会新建一个线程,new出的对象跟普通对象一 ...
- C#中通过三边长判断三角形类型（三角形测试用例）
对于<编程之美>P292上关于三角形测试用例的问题,题目是这样的: 输入三角形的三条边长,判断是否能构成一个三角形(不考虑退化三角形,即面积为零的三角形),是什么样的三角形(直角.锐角.钝 ...