项目简述
本Django项目为测试实例项目，用于学习测试。
分别用三种Django文件上传方式(form方式、jQuery+jQuery.ajax方式、原生JS+原生ajax方式)做上传功能示例
| 文件 | 文件释义 |
|---|---|
| form_upload.html | form上传文件静态页面 |
| jquery_ajax_upload.html | jQuery+jQuery.ajax上传文件静态页面 |
| js_ajax_upload.html | 原生JS+原生ajax上传文件静态页面 |
| Fupload.py | form上传文件方法 |
| JAupload.py | 原生JS+原生ajax上传文件方法 |
| JQupload.py | jQuery+jQuery.ajax上传文件方法 |
项目架构
Mydjango
APP
file
migrations
__init__.py
static
jquery-3.3.1.min.js
templates
form_upload.html
jquery_ajax_upload.html
js_ajax_upload.html
views
Fupload.py
JAupload.py
JQupload.py
__init__.py
admin.py
apps.py
models.py
tests.py
Mydjango
setting.py
urls.py
wsgi.py
项目示例
创建项目
django-admin startproject Mydjango
cd Mydjango
python manage.py startapp APP
form_upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form upload</title>
</head>
<body>
<h1>form方式上传提交</h1>
<!-- 包含上传文件的必要参数 enctyoe -->
<form action="f_upload.html" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<!-- 上传文件一定要给name参数 -->
<input type="file" name="uploadfile">
<input type="submit">
</form>
</body>
</html>
jquery_ajax_upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax upload</title>
<script src="../static/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>jQuery+jQuery方式的ajax上传提交</h1>
<!-- 包含上传文件的必要参数 enctyoe -->
{% csrf_token %}
<input id="Upfile" type="file" multiple="multiple" >
<a id="FileSub">提交</a>
<script>
$("#FileSub").click(function() {
var f_obj = $("#Upfile").get(0).files[0]; //获取上传文件信息
console.log("文件对象：",f_obj);
console.log("文件名称是：",f_obj.name);
console.log("文件大小是：",f_obj.size);
var data = new FormData(); //创建formdata对象，便于将文件传输到后端
data.append("file",f_obj) //在formdata对象中添加(封装)文件对象
$.ajax({
url:'jq_upload.html',
type:'POST',
data:data,
cache: false, //上传文件无需缓存
processData:false, //不对数据做序列化操作
contentType:false, //不定义特殊连接类型
success:function (arg) {
alert("文件已经上传成功，点击确定刷新页面");
location.reload();
}
})
});
</script>
</body>
</html>
js_ajax_upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax upload</title>
</head>
<body>
<h1>原生js+原生ajax方式上传提交</h1>
<!-- 包含上传文件的必要参数 enctyoe -->
{% csrf_token %}
<input id="Upfile" type="file" multiple="multiple" >
<a onclick="Js_Ajax();">提交</a>
<script>
function Js_Ajax() {
var xhr = new XMLHttpRequest(); //创建一个空对象，用于传输后端
xhr.onreadystatechange = function () { //指定回调函数
if (xhr.readyState == 4) { //回调函数状态判断
console.log("返回信息：", xhr.responseText);
alert("文件已经上传成功，点击确定刷新页面");
location.reload();
}
};
xhr.open('POST', 'ja_upload.html'); //建立POST方式请求
xhr.setRequestHeader('Conten-Type', 'application/x-www-foorm-urlencoded;charset-UTF-8'); //POST数据请求头
var f_obj = document.getElementById("Upfile").files[0]; //获取上传文件对象
console.log("文件对象：", f_obj);
console.log("文件名称是：", f_obj.name);
console.log("文件大小是：", f_obj.size);
var data = new FormData(); //创建formdata对象，便于将文件传输到后端
data.append("file", f_obj); //在formdata对象中添加(封装)文件对象
xhr.send(data); //建立的POST请求发送的数据
};
</script>
</body>
</html>
Fupload.py
# -*- coding:utf8 -*-
from django.shortcuts import render,HttpResponse
def F_Upload(request): # form 方式提交上传文件
if request.method == "GET":
return render(request, 'form_upload.html', )
else:
F = request.FILES
print("form上传的文件是：",F) #可以看到保护文件名和文件对象的字典
f_obj = F.get('uploadfile') #上传的文件对象
N = f_obj.name #上传的文件名称
S = f_obj.size #上传的文件大小
print("文件名称是：",N)
print("文件大小是：",S)
W_File(f_obj) #执行上传文件的方法
return HttpResponse('文件上传成功！')
def W_File(file_obj): #上传文件写入服务器,参数为上传的文件对象
f = open('APP/file/' + file_obj.name + "", 'wb') # 服务器创建上传同名的文件
for line in file_obj.chunks(): # 分块拿上传数据
f.write(line) # 循环写入拿到的数据块到服务器
f.close()
JAupload.py
# -*- coding:utf8 -*-
from django.shortcuts import render,HttpResponse
def JA_Upload(request):
if request.method == "GET":
return render(request,'js_ajax_upload.html',)
else:
file_obj = request.FILES.get('file') # 拿到from获取到的file数据
print("上传文件名称是：", file_obj.name)
print("上传文件大小是：", file_obj.size)
f = open('APP/file/' + file_obj.name + "", 'wb') # 服务器创建上传同名的文件
for line in file_obj.chunks(): # 分块拿上传数据
f.write(line) # 循环写入拿到的数据块到服务器
f.close()
return HttpResponse('文件上传成功！')
JQupload.py
# -*- coding:utf8 -*-
from django.shortcuts import render,HttpResponse
def JQ_Upload(request):
if request.method == "GET":
return render(request,'jquery_ajax_upload.html',)
else:
file_obj = request.FILES.get('file') # 拿到from获取到的file数据
print("上传文件名称是：", file_obj.name)
print("上传文件大小是：", file_obj.size)
f = open('APP/file/' + file_obj.name + "", 'wb') # 服务器创建上传同名的文件
for line in file_obj.chunks(): # 分块拿上传数据
f.write(line) # 循环写入拿到的数据块到服务器
f.close()
return HttpResponse(file_obj.name)
urls.py
from django.contrib import admin
from django.urls import path,re_path
from APP.views import Fupload,JAupload,JQupload
urlpatterns = [
path('admin/', admin.site.urls),
re_path('^f_upload.html$',Fupload.F_Upload),
re_path('^ja_upload.html$',JAupload.JA_Upload),
re_path('^jq_upload.html$',JQupload.JQ_Upload),
]
setting.py
INSTALLED_APPS添加建立的APP
'APP',
MIDDLEWARE
注释掉csrf部分
#'django.middleware.csrf.CsrfViewMiddleware',
TEMPLATES配置模版路径
'DIRS': [os.path.join(BASE_DIR, 'APP/templates')],
运行测试访问测试
python manage.py runserver
访问地址
http://127.0.0.1:8000/f_upload.html
http://127.0.0.1:8000/jq_upload.html
http://127.0.0.1:8000/ja_upload.html
来源：oschina
链接：https://my.oschina.net/u/2924779/blog/2977585