怎样设计个人网站,太原网站推广优化,网络营销分类,门户网站布局1. 项目结构
myproject/
├── myproject/
│ ├── settings.py
│ ├── urls.py
│ └── ...
├── myapp/
│ ├── templates/
│ │ └── upload.html
│ ├── views.py
│ ├── urls.py
│ └── ...
└── media/ # 手动创…1. 项目结构
myproject/
├── myproject/
│ ├── settings.py
│ ├── urls.py
│ └── ...
├── myapp/
│ ├── templates/
│ │ └── upload.html
│ ├── views.py
│ ├── urls.py
│ └── ...
└── media/ # 手动创建此目录 2. 配置Django设置settings.py
# settings.py
import osINSTALLED_APPS [myapp, # 确保应用已注册# ...
]MEDIA_URL /media/
MEDIA_ROOT os.path.join(BASE_DIR, media)# 允许大文件上传可选
DATA_UPLOAD_MAX_MEMORY_SIZE 52428800 # 50MB 3. 路由配置
项目路由myproject/urls.py
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import staticurlpatterns [path(, include(myapp.urls)),
] static(settings.MEDIA_URL, document_rootsettings.MEDIA_ROOT)
应用路由myapp/urls.py
from django.urls import path
from . import viewsurlpatterns [path(, views.upload_view, nameupload),path(upload/, views.file_upload, namefile_upload),
] 4. 视图逻辑myapp/views.py
from django.shortcuts import render
from django.http import JsonResponse
from django.conf import settings
from django.views.decorators.csrf import csrf_exempt
import osdef upload_view(request):return render(request, upload.html)csrf_exempt # 临时禁用CSRF生产环境需修复
def file_upload(request):if request.method POST and request.FILES.get(file):uploaded_file request.FILES[file]save_path os.path.join(settings.MEDIA_ROOT, uploaded_file.name)# 分块写入文件with open(save_path, wb) as destination:for chunk in uploaded_file.chunks():destination.write(chunk)return JsonResponse({status: success,filename: uploaded_file.name})return JsonResponse({status: error}, status400) 5. 前端模板myapp/templates/upload.html
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8!-- Bootstrap 5 --link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.3/dist/css/bootstrap.min.css relstylesheettitle文件上传/title
/head
bodydiv classcontainer mt-5 stylemax-width: 600px;h2 classmb-4文件上传演示/h2!-- 文件选择 --div classmb-3input typefile classform-control idfileInput/div!-- 进度条 --div classprogress mb-3 styleheight: 25px; display: none; idprogressContainerdiv idprogressBar classprogress-bar progress-bar-striped roleprogressbar stylewidth: 0%0%/div/div!-- 状态提示 --div idstatusMessage/div!-- 上传按钮 --button classbtn btn-primary onclickstartUpload()开始上传/button/div!-- 依赖库 --script srchttps://code.jquery.com/jquery-3.6.0.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.3/dist/js/bootstrap.bundle.min.js/scriptscriptfunction startUpload() {const fileInput document.getElementById(fileInput);const file fileInput.files[0];if (!file) {showMessage(请先选择文件!, danger);return;}const formData new FormData();formData.append(file, file);// 显示进度条$(#progressContainer).show();$.ajax({url: /upload/,type: POST,data: formData,contentType: false, // 必须设置processData: false, // 必须设置xhr: function() {const xhr new window.XMLHttpRequest();// 进度事件监听xhr.upload.addEventListener(progress, function(evt) {if (evt.lengthComputable) {const percent Math.round((evt.loaded / evt.total) * 100);updateProgress(percent);}}, false);return xhr;},success: function(response) {showMessage(文件 ${response.filename} 上传成功!, success);resetUI();},error: function(xhr) {showMessage(上传失败: (xhr.responseJSON?.status || 服务器错误), danger);resetUI();}});}function updateProgress(percent) {$(#progressBar).css(width, percent %).text(percent %);}function showMessage(text, type) {const alertClass alert alert-${type} alert-dismissible fade show;$(#statusMessage).html(div class${alertClass} rolealert${text}button typebutton classbtn-close data-bs-dismissalert/button/div);}function resetUI() {setTimeout(() {$(#progressContainer).hide();updateProgress(0);}, 1500);}/script
/body
/html
运行 HTML 6. 运行步骤
创建媒体目录
mkdir media
启动开发服务器
python manage.py runserver访问 http://localhost:8000 测试上传功能 关键功能说明
进度条实现 使用XMLHttpRequest的progress事件监听上传进度动态更新Bootstrap进度条的宽度和文本
安全增强生产环境必做 移除csrf_exempt装饰器在前端添加CSRF Token
// 在AJAX请求中添加headers
headers: {X-CSRFToken: document.querySelector([namecsrfmiddlewaretoken]).value
},
文件处理 使用file.chunks()分块处理大文件保存到MEDIA_ROOT指定目录
用户体验优化 上传完成后的自动状态重置可关闭的Bootstrap提示组件进度条动画效果条纹动画
常见问题解决
进度条不更新 检查浏览器控制台是否有CORS错误确认xhr.upload.addEventListener正确绑定
文件保存失败 确保MEDIA_ROOT目录存在且有写入权限检查Django的settings.py配置
CSRF验证失败 在生产环境中务必处理CSRF Token在模板中添加{% csrf_token %} 通过以上步骤您可以在Django中实现一个带Bootstrap进度条的文件上传功能既保证基本功能又具备良好的用户体验。
