文件上传
Posted ly0123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文件上传相关的知识，希望对你有一定的参考价值。
方式一：普通form表单上传
ps:本例子是将文件路径写进数据库，img标签src属性是从数据库拿到的文件路径
---------img.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/img" method="post" enctype="multipart/form-data"> ######上传文件必须要有enctype="multipart/form-data#######
<input type="file" name="file"> <input type="submit" value="提交">
</form>
<div>
{% for item in get_path %}
<img src="{{ item.path }}" alt="图标" style="width: 100px;height: 200px">
{% endfor %}
</div>
</body>
</html>
----------urls.py
path(‘img‘,views.img),
-----------views.py
def img(req):
if req.method=="POST":
file=req.FILES.get("file") ####接受文件要用FILES####
file_path=os.path.join("static","upload",file.name).replace("\","/")
models.File.objects.create(path=file_path)
f=open(file_path,"wb") ####将得到的文件写在static文件下的upload文件下#####
for i in file.chunks(): ###chunks是将文件以字节形式###
f.write(i)
f.close()
return redirect("/img")
elif req.method=="GET":
get_path=models.File.objects.all()
print(get_path)
return render(req,"img.html",{"get_path":get_path})
例如上传文件1.jpg，那么这个图片的路径是static/upload/1.jpg,浏览器输入127.0.0.1:8000/static/upload/1.jpg是找不到图片的，因为浏览器的输入的url要通过Django中的urls.py文件为接口进行查询，此时urls.py中没有相应的路由。解决方法如下
1.在settings.py中添加以下代码：
STATIC_URL = ‘/static/‘ STATIC_ROOT = os.path.join(os.path.dirname(__file__),‘static‘) #设静态路径为目录下的static文件夹 STATICFILES_DIRS = ( os.path.join(STATIC_ROOT,‘upload‘).replace(‘\‘,‘/‘)， #将upload文件夹添加到static文件夹下，浏览器可直接 xxx/static/upload访问 )
2.urls.py中添加: from django.contrib.staticfiles.urls import staticfiles_urlpatterns from django.contrib import staticfiles 最后添加： urlpatterns += staticfiles_urlpatterns()
3.将upload文件添加到static（和templates文件同级目录）文件下
4.测试 <p><img src="/static/upload/1.jpg" width="980" height="180"></p>
方式二：FormData和ajax方式上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery-3.3.1.js"></script>
</head>
<body>
<input type="file" id="file">
<input type="button" value="提交" id="file_submit" onclick="fun1()">
<div id="img_src">
</div>
<script>
-------------ajax-js
/*function fun1(){
var data=new FormData(); //新建FormData对象
data.append("file",document.getElementById("file").files[0]); //FormData对象调用append方法，添加键值对，本行代码中添加的是id为file标签产生的对象
var xmlHttp=new XMLHttpRequest();
xmlHttp.onreadystatechange=function(){ //监听函数(回调函数)
if(xmlHttp.readyState==4 && xmlHttp.status==200){
obj=JSON.parse(xmlHttp.responseText);
img=document.createElement("img"); //创建img标签
img.src="/"+obj;
parent_img=document.getElementById("img_src");
parent_img.appendChild(img); //将img标签添加到id为img_src的div下面
}
};
xmlHttp.open("POST","/img/",true); //参数true是默认局部刷新
xmlHttp.send(data); //发送FormData对象
}
*/
-------------ajax-jQuery
function fun1(){
var data=new FormData();
data.append("file",document.getElementById("file").files[0]);
$.ajax({
url:"/img/",
data:data,
type:"POST",
processData:false, //jquery发送的自动是字符串，这两行是不做字符串处理
contentType:false, //发送的是什么类型的就是什么类型的
success:function(arg) { //回调函数
obj=JSON.parse(arg);
console.log(obj);
img=document.createElement("img");
img.src="/"+obj;
parent_img=document.getElementById("img_src");
parent_img.appendChild(img);
}
})
}
</script>
</body>
</html>
------------views.py
def img(req):
if req.method=="POST":
file=req.FILES.get("file")
file_path=os.path.join("static","upload",file.name).replace("\","/")
models.File.objects.create(path=file_path)
f=open(file_path,"wb")
for i in file.chunks():
f.write(i)
f.close()
return HttpResponse(json.dumps(file_path)) //dumps是将json对象转化为字符串
elif req.method=="GET":
return render(req,"img.html")
方式三：iframe和form表单结合提交（原理：form表单通过iframe提交数据给后台，然后后台返回数据给iframe，然后再从iframe中拿去数据给前端，有点类似Ajax，iframe和Ajax都相当于前端和后端的一个接口）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery-3.3.1.js"></script>
</head>
<body>
<hr>
<form action="/iframe" target="iframe_1" enctype="multipart/form-data" method="post"> //如果没有target，form表单是要直接提交数据给后台的。有了target="iframe_1",就是将form表单的数据通过name="iframe_1"的iframe为借口提交给后台
<iframe src="" id="iframs" name="iframe_1" onload="loadiframe()"></iframe> //form表单一旦提交数据给iframe，就触动onload函数
<input type="file" name="file">
<input type="submit">
</form>
<div id="img_src">
</div>
<script>
function loadiframe(){
var str_son=$("#iframs").contents().find("body").text(); //获取iframe标签中body的变化，form表单没有给iframe提交数据前，iframe的body标签是空的，一旦提交了它里面就会接受到后端传来的数据，前端从这里面提取数据
var obj=JSON.parse(str_son);
img=document.createElement("img");
img.src="/"+obj;
parent_img=document.getElementById("img_src");
parent_img.appendChild(img);
}
</script>
</body>
</html>
--------------views.py
def iframe(req):
if req.method=="POST":
file=req.FILES.get("file")
file_path=os.path.join("static","upload",file.name).replace("\","/")
models.File.objects.create(path=file_path)
f=open(file_path,"wb")
for i in file.chunks():
f.write(i)
f.close()
return HttpResponse(json.dumps(file_path))
elif req.method=="GET":
return render(req,"iframe.html")
以上是关于文件上传的主要内容，如果未能解决你的问题，请参考以下文章
ajaxFileUpload上传带参数文件及JS验证文件大小