目录
文件上传
1）form表单提交上传（会刷新）
2）ajax上传
3）iframe
4)图片上传预览（思路保存文件的时候，把文件保存文件的路径反馈回，客户端直接访问图片地址）
原生ajax和ajax,这两个都依赖于FormData对象，但是底板浏览器不支持。
iframe都支持(大部份网站都采用这种方式，什么版本浏览器都支持。
时机：
如果发送的是文件-->iframe,jquery,(formdata),XMLHTTPReuqest(Formdata)
考虑浏览器版本兼容，推荐iframe方式。
一：ajax原生实现上传
#ajax原生实现上传
#urls.py
url(r'^upload/$',views.upload),
url(r'^upload_file/$',views.upload_file), #upload.html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.upload{
display: inline-block;padding: 10px;
background-color: brown;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 90;
}
.file{
width: 100px;height: 50px;opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
}
</style>
</head>
<body>
<div style="position: relative;width: 100px;height: 50px;">
<input class="file" type="file" id="fafafa" name="afafaf" />
<a class="upload">上传</a>
</div>
<input type="button" value="提交XHR" onclick="uploadXHR();"> <script>
//使用原生ajax实现上传
function uploadXHR(){
//首先获取值
//$("#fafafa")[0]==document.getElementById("fafafa")
//files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0，
var file_obj=document.getElementById("fafafa").files[0]
//这里file_obj是对象，send发送的是字符串，所以不能直接发送
var formdata=new FormData();//FormData表示是一个form表单
formdata.append("username","root");//key ,value
formdata.append("fafafa",file_obj);//可以加对象 //设置原生ajax对象
var xhr= new XMLHttpRequest()
xhr.open("POST","/upload_file/",true);
//回调函数，当状态变化时触发
xhr.onreadystatechange=function(){
//4是表示所有数据接受完了
if (xhr.readyState==4){
//获取返回值
console.log(xhr.responseText) //返回的是字符串
//转对象
JSON.parse(xhr.responseText)
} }
//上传文件不需要设置请求头
xhr.send(formdata);//发送的数据只能是字符串 }
</script>
</body>
</html> #views.py
def upload_file(request):
username=request.POST.get("username")
file_obj=request.FILES.get("fafafa")
print(username,file_obj)
with open(file_obj.name,'wb') as f:
for item in file_obj.chunks():
f.write(item)
ret={"status":False,"data":request.POST.get("username")}
return HttpResponse(json.dumps(ret))
二：ajax jquery实现上传
##ajax jquery实现上传
#upload.html
<div style="position: relative;width: 100px;height: 50px;">
<input class="file" type="file" id="fafafa" name="afafaf" />
<a class="upload">上传</a>
</div>
<input type="button" value="提交jqury" onclick="uploadJquery();">
<script src="/static/jquery-1.12.4.js"></script>
<script>
//jqury实现上传
function uploadJquery(){
//首先获取值
//$("#fafafa")[0]==document.getElementById("fafafa")
//files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0，
var file_obj=document.getElementById("fafafa").files[0]
//这里file_obj是对象，send发送的是字符串，所以不能直接发送
var formdata=new FormData();//FormData表示是一个form表单
formdata.append("username","root");//key ,value
formdata.append("fafafa",file_obj);//可以加对象,可以被send发送
$.ajax({
url: '/upload_file/',
type: 'POST',
data: formdata,
processData: false, // tell jQuery not to process the data上传文件要设置
contentType: false, // tell jQuery not to set contentType上传文件要设置
success:function(arg,a1,a2){
console.log(arg);
console.log(a1);
console.log(a2);
}
})
}
三：iframe实现上传
##iframe实现上传
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form>
<script>
//使用iframe实现上传
function iframeSubmit(){
$("#ifm1").load(
function(){
//因为iframe里面有document,所以获取下面的元素先用contains.
var content=$('#ifm1').contents().find('body').text();
console.log(content);
}
)}
<script>
def upload_file(request):
username=request.POST.get("username")
file_obj=request.FILES.get("fafafa")
print(username,file_obj)
with open(file_obj.name,'wb') as f:
for item in file_obj.chunks():
f.write(item)
ret={"status":False,"data":request.POST.get("username")}
return HttpResponse(json.dumps(ret))
四：上面3种完整示例
##上面3种完整示例
#urls.py
url(r'^upload/$',views.upload),
url(r'^upload_file/$',views.upload_file), #views.py
def upload_file(request):
username=request.POST.get("username")
file_obj=request.FILES.get("fafafa")
print(username,file_obj)
with open(file_obj.name,'wb') as f:
for item in file_obj.chunks():#一点一点上传
f.write(item)
ret={"status":False,"data":request.POST.get("username")}
return HttpResponse(json.dumps(ret)) #upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.upload{
display: inline-block;padding: 10px;
background-color: brown;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 90;
}
.file{
width: 100px;height: 50px;opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
}
</style>
</head>
<body>
<div style="position: relative;width: 100px;height: 50px;">
<input class="file" type="file" id="fafafa" name="afafaf" />
<a class="upload">上传</a>
</div>
<input type="button" value="提交XHR" onclick="uploadXHR();">
<input type="button" value="提交jqury" onclick="uploadJquery();"> <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
//jqury实现上传
function uploadJquery(){
//首先获取值
//$("#fafafa")[0]==document.getElementById("fafafa")
//files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0，
var file_obj=document.getElementById("fafafa").files[0]
//这里file_obj是对象，send发送的是字符串，所以不能直接发送
var formdata=new FormData();//FormData表示是一个form表单
formdata.append("username","root");//key ,value
formdata.append("fafafa",file_obj);//可以加对象,可以被send发送 $.ajax({
url: '/upload_file/',
type: 'POST',
data: formdata,
processData: false, // tell jQuery not to process the data上传文件要设置
contentType: false, // tell jQuery not to set contentType上传文件要设置
success:function(arg,a1,a2){
console.log(arg);
console.log(a1);
console.log(a2);
}
})
} //使用原生ajax实现上传
function uploadXHR(){
//首先获取值
//$("#fafafa")[0]==document.getElementById("fafafa")
//files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0，
var file_obj=document.getElementById("fafafa").files[0]
//这里file_obj是对象，send发送的是字符串，所以不能直接发送
var formdata=new FormData();//FormData表示是一个form表单
formdata.append("username","root");//key ,value
formdata.append("fafafa",file_obj);//可以加对象 //设置原生ajax对象
var xhr= new XMLHttpRequest()
xhr.open("POST","/upload_file/",true);
//回调函数，当状态变化时触发
xhr.onreadystatechange=function(){
//4是表示所有数据接受完了
if (xhr.readyState==4){
//获取返回值
console.log(xhr.responseText) //返回的是字符串
//转对象
JSON.parse(xhr.responseText)
} }
//上传文件不需要设置请求头
xhr.send(formdata);//发送的数据只能是字符串 } //使用iframe实现上传
function iframeSubmit(){
$("#ifm1").load(
function(){
//因为iframe里面有document,所以获取下面的元素先用contains.
var content=$('#ifm1').contents().find('body').text();
console.log(content);
}
)}
</script>
</body>
</html>
五：预览图片功能实现
##图片预览
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form>
<!--用来图片预览显示-->
<div id="preview"></div> //使用iframe实现上传
function iframeSubmit(){
$("#ifm1").load(
function(){
//因为iframe里面有document,所以获取下面的元素先用contains.
var content=$('#ifm1').contents().find('body').text();
var obj=JSON.parse(content); $("#preview").empty();//如果里面有标签先清空
var imgTag=document.createElement("img");
imgTag.src="/"+obj.data; //注意反馈回来路径前面没有"/"
$("#preview").append(imgTag); }
)} ##图片预览改进（不点提交，给input file绑定onchange()事件，一改变就提交表单）
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" onchange="ChangeFile();"/>
</form>
<!--用来图片预览显示-->
<div id="preview"></div> <script>
function ChangeFile(){
//先给iframe绑定load事件
$("#ifm1").load(
function(){
//因为iframe里面有document,所以获取下面的元素先用contains.
var content=$('#ifm1').contents().find('body').text();
var obj=JSON.parse(content); $("#preview").empty();//如果里面有标签先清空
var imgTag=document.createElement("img");
imgTag.src="/"+obj.data; //注意反馈回来路径前面没有"/"
$("#preview").append(imgTag); }
)
//改变事件提交表单
$("#form1").submit();
}
</script>