Django加bootstrap实现上传文件含有进度条
- 电脑硬件
- 2025-08-24 18:15:02
1. 项目结构 myproject/ ├── myproject/ │ ├── settings.py │ ├── urls.py │ └── ... ├── myapp/ │ ├── templates/ │ │ └── upload.html │ ├── views.py │ ├── urls.py │ └── ... └── media/ # 手动创建此目录
2. 配置Django设置（settings.py） # settings.py import os INSTALLED_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 static urlpatterns = [ path('', include('myapp.urls')), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 应用路由（myapp/urls.py） from django.urls import path from . import views urlpatterns = [ 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 os def 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=" 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=" code.jquery /jquery-3.6.0.min.js"></script> <script src=" 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进度条的宽度和文本 安全增强（生产环境必做）： 移除@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进度条的文件上传功能，既保证基本功能又具备良好的用户体验。
Django加bootstrap实现上传文件含有进度条由讯客互联电脑硬件栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“Django加bootstrap实现上传文件含有进度条”
