0.本周知识点预览
- Django Form文件上传
- 原生Ajax
- Ajax 文件上传
- iframe 文件上传
1.Django Form文件上传
前端代码：
{# Form方式上传文件,注意method是POST,enctype的设置必不可少,不然只能传个文件名,不能传文件内容#} <form action="/upload/" method="POST" enctype="multipart/form-data"> <input type="text" name="user"/> <input type="file" name="img"/> <input type="submit" name="submit"/> </form>
后端代码：
views.py
def upload(request): if request.method == "POST": user = request.POST.get("user") img = request.FILES.get("img") file_path = os.path.join("static", img.name) f = open(file_path, "wb")
##chunks方法是可迭代的，可以先看img的属性，然后找到类，找到该方法 for line in img.chunks(): f.write(line) f.close() return render(request, "upload.html")
2.原生Ajax
1.GET
前端代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" name="abc"/> <input type="button" value="ajax提交" onclick="ajax1();"/> <script> {# get方式#} function ajax1(){ {# 初始化一个XMLHttpRequest对象,原生Ajax就是这么实现的#} var a = new XMLHttpRequest(); {# 定义一个回调函数#} {# 当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。#} a.onreadystatechange = function () { {# 0: 请求未初始化,1: 服务器连接已建立,2: 请求已接收,3: 请求处理中,4: 请求已完成，且响应已就绪#} if(a.readyState == 4){ console.log(a.responseText) } }; {# open方法,定义请求类型,get,post等,第二个是url和请求参数#} a.open("GET", "/ajax_test/?p=123"); {# send方法发送Ajax请求#} a.send(); }
后端代码接收GET请求的p参数:
def ajax(request): return render(request, "ajax.html") def ajax_test(request): a = request.GET.get("p") # a = request.POST.get("p") print(a) return HttpResponse("ok")
2.POST
前端代码：
function ajax1(){
var a = new XMLHttpRequest();
a.onreadystatechange = function () {
if(a.readyState == 4){
console.log(a.responseText)
}
};
{# POST的时候无需写参数,只写url后边要带杠,#}
a.open("POST", "/ajax_test/");
{# 需要设置POST请求头#}
a.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
a.send("p=123");
}
后端代码：
def ajax(request): return render(request, "ajax.html") def ajax_test(request): # a = request.GET.get("p") a = request.POST.get("p") print(a) return HttpResponse("ok")
3.FORM
前端代码：
function ajax1(){
var a = new XMLHttpRequest();
a.onreadystatechange = function () {
if(a.readyState == 4){
console.log(a.responseText)
}
};
a.open("POST", "/ajax_test/");
{# 这里不需要设置POST请求头了#}
a.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
{# 这里是重点,新建个form对象#}
var form = new FormData;
{# 把需要发送的数据追加到form里#}
form.append("p", "123");
{# 直接发送form对象#}
a.send(form);
}
3.Ajax文件上传
1.Form对象上传
前端代码:
Ajax方式上传文件 <form action="/upload/" method="POST" enctype="multipart/form-data"> <input type="text" name="user" id="user"/> <input type="file" name="img" id="img" value="ajax上传"/> </form> <a style="display: inline-block; background-color: red; color: bisque; cursor: pointer;" onclick="Ajax1();">XMLHttpRequest</a> <script> function Ajax1(){ {# 新建一个form对象#} {# 把数据添加到form对象中#} var form = new FormData(); form.append("user", document.getElementById("user").value); {# fileobj 是一个文件对象#} var fileobj = document.getElementById("img").files[0]; form.append("img", fileobj); {# 新建一个Ajax对象用来上传文件#} var aa = new XMLHttpRequest(); {# 回调函数,并判断哪种状态在打印数据,4代表数据完全传输完#} aa.onreadystatechange = function () { if(aa.readyState == 4){ console.log(aa.responseText) } }; {# POST的方式传输,直接send一个form对象#} aa.open("post", "/upload/", true); aa.send(form); } </script>
2.Iframe 上传文件
{# iframe方式上传文件,Iframe可以看做是一个能向后端传输数据的通道,可以把form提交到iframe里#} <script src="/static/js/jquery-1.12.4.js"></script> form提交表单通过iframe传到后台,把form的提交地址改成iframe的name属性 <iframe id="my_iframe" name="my_iframe" style="display: none;"></iframe> <form id="fo" action="/upload/" method="POST" enctype="multipart/form-data"> user测试页面是否刷新 <input type="text" name="user" id="user"/> onchange事件是说input标签发生变化之后就会执行函数 <input type="file" name="img" id="img" onchange="uploadFile3();"/> </form> 用来预览上传的图片 <div id="containter"></div> <script> function uploadFile3(){ $("#containter").find("img").remove(); onload等待iframe全部加载之后执行函数 document.getElementById("my_iframe").onload = callback; //这个target加的是iframe的name属性 document.getElementById("fo").target = "my_iframe"; //DOM方式上传表单 document.getElementById("fo").submit(); } function callback(){ //因为iframe嵌套有个#ducoment,所以要加content属性 var text = $("#my_iframe").contents().find("body").text(); var json_data = JSON.parse(text); console.log(json_data); if (json_data.status){ //上传成功 //预览,创建img标签,src属性指向上传后的服务器路径 var tag = document.createElement("img"); //拼接预览路径 tag.src = "/" + json_data.data; tag.className = "img"; $("#containter").append(tag); } else { alert(json_data.error); } } </script>