Django目录：//www.greatytc.com/p/dc36f62b3dc5
简单的文件上传
关于文件上传，普通网站最常用的就是头像上传，有一些功能性网站会有文档或者视频上传功能。其实文件的上传本质还是一串二进制流的存储变换。我们来用基础的form表单来举个例子：
two_exa.two_exa.urls.py
-----------------------
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index1/',views.index1),
path('file_put/',views.file_put)
]
two_exa.app01.views.py
----------------------
from django.shortcuts import render,HttpResponse
import os
from two_exa import settings
def index1(request):
return render(request,"index1.html")
def file_put(request):
print(request.POST)
print(request.FILES)
file_obj = request.FILES.get("file_obj")
print(file_obj)
path = file_obj.name
#settings.BASE_DIR是项目根目录的意思。
path = os.path.join(settings.BASE_DIR,"media","img",path)
with open(path,"wb") as f:
for line in file_obj:
f.write(line)
return HttpResponse("ok")
two_exa.tmplates.index1.html
----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>简单的文件上传</p>
<form action="/file_put/" method="post" enctype="multipart/form-data">
姓名<input type="text" name="user">
文件<input type="file" name="file_obj">
<input type="submit" >
</form>
</body>
</html>
我们随便选择一个文件上传。
页面截图1
上传成功
页面截图2
我们把文件上传到了我们指定的目录。
目录树部分
ajex文件上传
既然能使用普通的form表单，那么我们用ajex来尝试一下。
two_exa.two_exa.urls.py
-----------------------
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index1/',views.index1),
path('file_put/',views.file_put)
]
two_exa.app01.views.py
----------------------
from django.shortcuts import render,HttpResponse
import os
from two_exa import settings
def index1(request):
return render(request,"index1.html")
def file_put(request):
print(request.POST)
print(request.FILES)
file_obj = request.FILES.get("file_obj")
print(file_obj)
path = file_obj.name
#settings.BASE_DIR是项目根目录的意思。
path = os.path.join(settings.BASE_DIR,"media","img",path)
with open(path,"wb") as f:
for line in file_obj:
f.write(line)
return HttpResponse("ok")
two_exa.tmplates.index1.html
----------------------------
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
</head>
<body>
<p>简单的文件上传</p>
<form action="/file_put/" method="post" enctype="multipart/form-data">
姓名<input type="text" name="user">
文件<input type="file" name="file_obj">
<input type="submit" >
</form>
<hr>
<p>ajex的文件上传</p>
<div>
用户名 <input type="text" id="user">
头像 <input type="file" id="avatar">
<input type="button" id="ajax-submit" value="ajax-submit">
</div>
<script>
$("#ajax-submit").click(function(){
var formdata=new FormData();
formdata.append("user",$("#user").val());
formdata.append("file_obj",$("#avatar")[0].files[0]);
$.ajax({
url:"/file_put/",
type:"post",
data:formdata,
#下面两个配置项必须加，他们和数据类型的处理有关
processData: false , // 不处理数据
contentType: false, // 不设置内容类型
success:function(data){
console.log(data)
}
})
})
</script>
</body>
</html>
页面截图
