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>