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请求数据,很多 ...
随机推荐
- 鸟哥的linux私房菜学习记录之开机流程、模块管理与Loader
- D5转Xe点滴
1. VarIsNull 函数已经被 Variants 单元, 相应的 Var 相关都放在哪 2.原本在 SysUtils 下的部分格式函数或定义,例如 .DecimalSeparator: Sho ...
- HTTP详解(1)-工作原理【转】
转自:http://blog.csdn.net/hguisu/article/details/8680808 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 1 HTTP简 ...
- unicode转码，如：\u6d4b\u8bd5转成中文“测试”
public static void main(String[] args) { String s = "测试"; String tt = gbEncoding(s); // St ...
- postgresql 热备与恢复
一. PostgreSQL热备份的过程一般为: 数据库中执行:pg_start_backup() ; 然后使用操作系统的tar或 cp命令拷贝 PostgreSQL数据文件. 数据库中执行:pg_st ...
- yii2 批量插入or更新
$sql1 = 'insert into business_ip (gid, name, area, belongName, belongArea, destIPv4, created, update ...
- 杭电1013-Digitai Root(这是一道考研编程题-天大2015)
Digital Roots Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- 上传文件时，Request报文头不同浏览器会产生不同的content-type
选择一个zip文件上传,用IE看的报文头是image/jpeg,用chrom看是application/octet-stream. 第一次遇到这个类型的content-type,百度了一下, octe ...
- 1014 C语言文法定义与C程序的推导过程 程序：冒泡算法C程序（语法树）
阅读并理解提供给大家的C语言文法文件. 参考该文件写出一个自己好理解版的现实版的完整版的C语言文法. 给出一段C程序,画出用上述文法产生这段C程序的完整语法树. 程序:冒泡算法C程序 点此文字查看原图 ...
- html移动开发app-framework2.0使用心得
1.页面切换动画结束时卡(禁用动画) 2.搜索或导航标签需要固定(标签选择器动态修改高度) 3.pancel容器默认生成的时候内容不放 通过动态的的$("").empty().ht ...