Django上传文件之iframe

来源：互联网发布：能过淘宝账号查一个人编辑：程序博客网时间：2024/06/04 22:53

代码:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="/static/jquery-1.12.4.js"></script>
<style>
.img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<input id="url" type="text">
<iframe id="my_frame" src="" style="display: none" name="my_frame"></iframe>

<form id="fo" method="POST" action="/upload/" enctype="multipart/form-data">
<input type="text" name="user" id="user"><br>
<input type="file" name="img" id="img" onchange="UploadFile3();"><br>
<input type="submit" value="提交">
</form>
<div id="container">

</div>

<a onclick="UploadFile();" style="color: red;cursor:pointer;">XMLRequest按钮上传</a>
<a onclick="UploadFile2();" style="color: red;cursor:pointer;">XMLRequest按钮上传</a><br>
<a onclick="UploadFile3();" style="color: red;cursor:pointer;">测试Iframe</a>
</body>
<script>
function UploadFile()
{
var formDa=new FormData();
formDa.append("user",document.getElementById("user").value);

var file=document.getElementById("img").files[0];
formDa.append("img",file);
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
var data=xhr.responseText;
console.log(data);

};
xhr.open("post","/upload/",true);
xhr.send(formDa);
}
function UploadFile2(){
var formD=new FormData();
formD.append("user",$("#user").val());
var fileobj=$("#img")[0].files[0];
formD.append("imgg",fileobj);
$.ajax({
url:"/upload/",
type:"POST",
data:formD,
processData:false,
contentType:false,
success: function (data) {
console.log(data);
}

})

}

function UploadFile3()
{
$("#container").find("img").remove();
document.getElementById("my_frame").onload=callBack;

document.getElementById("fo").target="my_frame";
document.getElementById("fo").submit();
}

function callBack() {

var text=$("#my_frame").contents().find("body").text();
console.log(text);
var response=JSON.parse(text);
if(response.status){
var tag=document.createElement("img");
tag.src="/"+response.filepath;
tag.className="img";

$("#container").append($(tag));
}else{

}

}

</script>

</html>

后端代码:

def upload(request):
if request.method=="POST":
ret={"status":True,"data":""}
user=request.POST.get("user",None)
img=request.FILES.get("img",None)
from django.core.files.uploadedfile import TemporaryUploadedFile
print(img._get_name(),type(img))
print(img.size)
f=open(os.path.join("static",img.name),"wb")
ret["filepath"]=os.path.join("static",img.name)
for chunck in img.chunks():
f.write(chunck)
f.close()
return HttpResponse(json.dumps(ret))
return render(request,"upload.html")

0 0