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 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）

    
    
    
    


    

        
文件上传演示
        
        
        

            
        
        
        
        

            
0%
        
        
        
        

        
        
        开始上传
    

    
    
    

    

运行 HTML

---

6. 运行步骤

创建媒体目录：

mkdir media

启动开发服务器：

1. python manage.py runserver
2. 访问 http://localhost:8000 测试上传功能

---

关键功能说明

1. 进度条实现：

• • 使用XMLHttpRequest的progress事件监听上传进度
  • 动态更新Bootstrap进度条的宽度和文本

1. 安全增强（生产环境必做）：

• • 移除@csrf_exempt装饰器
  • 在前端添加CSRF Token：

// 在AJAX请求中添加headers
headers: {
    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
},

1. 文件处理：

• • 使用file.chunks()分块处理大文件
  • 保存到MEDIA_ROOT指定目录

1. 用户体验优化：

• • 上传完成后的自动状态重置
  • 可关闭的Bootstrap提示组件
  • 进度条动画效果（条纹动画）

常见问题解决

1. 进度条不更新：

• • 检查浏览器控制台是否有CORS错误
  • 确认xhr.upload.addEventListener正确绑定

1. 文件保存失败：

• • 确保MEDIA_ROOT目录存在且有写入权限
  • 检查Django的settings.py配置

1. CSRF验证失败：

• • 在生产环境中务必处理CSRF Token
  • 在模板中添加{% csrf_token %}

---

通过以上步骤，您可以在Django中实现一个带Bootstrap进度条的文件上传功能，既保证基本功能又具备良好的用户体验。