基于Django实现文件上传
1. url路由配置
路径：C:UserssuperyDesktopday82demo_ajaxdemo_ajaxurls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^upload/', views.upload),
]
2. 视图函数代码
def upload(request):
if request.method=="POST":
print("POST", request.POST)
print("FILES",request.FILES) # FILES <MultiValueDict: {}>
file_obj=request.FILES.get("avatar")
print(file_obj.name,"-----")
with open(file_obj.name,"wb") as f:
for i in file_obj:
f.write(i)
return HttpResponse("成功")
return render(request,"upload.html")
3. 静态文件
路径：C:UserssuperyDesktopday82demo_ajax emplatesupload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<form action="/upload/" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>用户名<input type="text" name="user"></p>
<p>头像<input type="file" name="avatar"></p>
<input type="submit">
</form>
</body>
</html>
基于Ajax实现上传文件
1. 路由规则
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^get_ajax/', views.get_ajax),
url(r'^upload/', views.upload),
]
2. 视图函数
def index(request):
return render(request," index_formdata.html")
3. 静态文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.login_error{
color: red;
}
</style>
</head>
<body>
{% csrf_token %}
<form action="" id="s1">
<p>姓名<input type="text"></p>
<p>密码<input type="password"></p>
<p>头像<input type="file" id="upload_avatar"></p>
</form>
<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
{#<script src="/static/index.js"></script>#}
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
function foo() {
$(".login_error").html("")
}
$(".Ajax_send").click(function () {
var formData=new FormData();
formData.append("username",$(":text").val());
formData.append("password",$(":password").val());
formData.append("avatar",$("#upload_avatar")[0].files[0]);
// ajax请求
$.ajax({
url:"/get_ajax/",
type:"POST",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data:formData,
contentType:false,
processData:false,
success:function (data) {
var data=JSON.parse(data);
console.log(data);
console.log(typeof data);
// $(".error").html(data)
if(!data["flag"]){
$(".login_error").html("用户名或者密码错误");
setTimeout(foo,3000)
}
}
})
})
</script>
</body>
</html>
4. get_ajax代码
def get_ajax(request):
username=request.POST.get("username")
password=request.POST.get("password")
print("FIFLE",request.FILES) # 上传文件对象
print("POST",request.POST)
response={"flag":False}
if username=="yuan" and password=="123":
response["flag"]=True
import json
return HttpResponse(json.dumps(response))