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请求数据,很多 ...
随机推荐
- sql如何将同个字段不同值打印在一行
group_concat(distinct(img)) group by id通过id分组把img的值打印在一行group_concat()通常和group by一起使用,功能是把某个字段的值打印在一 ...
- OBD 14230 Slow, Addr激活
const u8 LinkCmd14230[6] = { 0xC2, 0x33, 0xF1, 0x01, 0x00, 0xE7 }; u8 ISO14230ADDR_Check(){ ...
- TI CC254x BLE教程 1
约定, 第一次翻译这种东西, 专有名词的翻译原则还是不太清楚, 总之涉及有可能误解的词, 都用双语, 如果是简单的, 直接英文或者中文, 取决于我是否能找到中文合适的词来翻译. 何为BLE: 1. 是 ...
- struts2上传
注意事项:文件名必须是:文件域+FileName,如: // 封装上传文件域的属性 private File uploadImage; // 封装上传文件名的属性 private String upl ...
- 28、Oracle（四）用户权限控制
一)用户Oracle中的用户分为二大类1)Oracle数据库服务器创建时,由系统自动创建的用户,叫系统用户,如sys.2)利用系统用户创建的用户,叫普通用户,如scott,hr,c##tiger,zh ...
- PyChram使用技巧总结
1.1 下载 官网1.2 汉化 1.3 添加或者修改文件模板 File->settings->Editor->File and Code Templates->Python S ...
- hdwiki中模板和标签的使用
MVC中的视图view 主要负责页面显示部分,所有的页面显示全部在此实现,视图对整个页面负责,它通过control的调用来显示页面和数据. ......视图(view)类template.class. ...
- [xcode]instruments来检验你的app
原文网址:http://www.cocoachina.com/industry/20140114/7696.html 比较了好多关于instruments 还是发现老外写的比较牛逼.于是果 ...
- linux修改mac地址
先禁用网卡ifconfig eth0 down 再用ifconfig eth0 hw ether 新地址 这样就可以了 要想永久修改的话,在/etc/rc.d/rc.local里加上下面三句(/etc ...
- Dungeon Master 分类： 搜索 POJ 2015-08-09 14:25 4人阅读 评论(0) 收藏
Dungeon Master Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 20995 Accepted: 8150 Descr ...