Django加bootstrap实现上传文件含有进度条
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 # 50MB3. 路由配置
项目路由（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_root=settings.MEDIA_ROOT)应用路由（myapp/urls.py）
from django.urls import path
from . import viewsurlpatterns = [path('', views.upload_view, name='upload'),path('upload/', views.file_upload, name='file_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'}, status=400)5. 前端模板（myapp/templates/upload.html）
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><!-- Bootstrap 5 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"><title>文件上传</title>
</head>
<body><div class="container mt-5" style="max-width: 600px;"><h2 class="mb-4">文件上传演示</h2><!-- 文件选择 --><div class="mb-3"><input type="file" class="form-control" id="fileInput"></div><!-- 进度条 --><div class="progress mb-3" style="height: 25px; display: none;" id="progressContainer"><div id="progressBar" class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%">0%</div></div><!-- 状态提示 --><div id="statusMessage"></div><!-- 上传按钮 --><button class="btn btn-primary" onclick="startUpload()">开始上传</button></div><!-- 依赖库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script><script>function 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}" role="alert">${text}<button type="button" class="btn-close" data-bs-dismiss="alert"></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进度条的宽度和文本
- 使用XMLHttpRequest的
- 安全增强（生产环境必做）：
-
- 移除
@csrf_exempt装饰器 - 在前端添加CSRF Token：
- 移除
// 在AJAX请求中添加headers
headers: {'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
},- 文件处理：
-
- 使用
file.chunks()分块处理大文件 - 保存到
MEDIA_ROOT指定目录
- 使用
- 用户体验优化：
-
- 上传完成后的自动状态重置
- 可关闭的Bootstrap提示组件
- 进度条动画效果（条纹动画）
常见问题解决
- 进度条不更新：
-
- 检查浏览器控制台是否有CORS错误
- 确认
xhr.upload.addEventListener正确绑定
- 文件保存失败：
-
- 确保
MEDIA_ROOT目录存在且有写入权限 - 检查Django的
settings.py配置
- 确保
- CSRF验证失败：
-
- 在生产环境中务必处理CSRF Token
- 在模板中添加
{% csrf_token %}
通过以上步骤，您可以在Django中实现一个带Bootstrap进度条的文件上传功能，既保证基本功能又具备良好的用户体验。