当前位置：首页 > news >正文

Django加bootstrap实现上传文件含有进度条

news 2025/9/24 1:19:06

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_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进度条的宽度和文本

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

- 移除@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实现上传文件含有进度条

1. 项目结构 myproject/ ├── myproject/ │ ├── settings.py │ ├── urls.py │ └── ... ├── myapp/ │ ├── templates/ │ │ └── upload.html │ ├── views.py │ ├── urls.py │ └── ... └── media/ # 手动创…...

编程日记 2025/2/21 13:27:22

八大排序算法（2）交换排序-冒泡排序和快速排序

快速排序（Quick Sort） 和冒泡排序（Bubble Sort） 都是常见的交换排序算法，它们的核心思想都是通过交换元素来实现排序。但是，它们的工作原理和性能差异非常大。下面我们来详细对比这两种排序算法&#xff1…...

编程日记 2025/2/21 13:25:16

Python的那些事第二十三篇：Express（Node.js）与 Python：一场跨语言的浪漫邂逅

摘要在当今的编程世界里，Node.js 和 Python 像是两个性格迥异的超级英雄，一个以速度和灵活性著称，另一个则以强大和优雅闻名。本文将探讨如何通过 Express 框架将 Node.js 和 Python 结合起来，打造出一个高效、有趣的 Web 应用。我们将通过一系列幽默风趣的实例和表格，展…...

编程日记 2025/2/21 13:24:12

STM32MP157A单片机移植Linux驱动

在stm32mp157a单片机移植Linux操作系统，并移植内核驱动，在应用程序中使用3个线程，分别实现控制单片机上3个led流水灯的功能、蜂鸣器控制的功能、风扇控制的功能。需求整理： 1.驱动程序-->led1.c，led2.c&#xff…...

编程日记 2025/2/21 13:21:03

Qt程序退出相关资源释放问题

目录问题背景： aboutToQuit 代码举例 closeEvent事件代码举例程序退出方式 quit() exit(int returnCode 0) close() 问题背景： 实际项目中程序退出前往往需要及进行一些资源释放、配置保存、线程中断等操作，避免资源浪费&#xff…...

编程日记 2025/2/21 13:19:59

【大学生职业规划大赛备赛PPT资料PDF | 免费共享】

自取链接： 链接：https://pan.quark.cn/s/4fa45515325e 📢 同学，你是不是正在为职业规划大赛发愁？ 想展示独特思路却不知如何下手？ 想用专业模板却找不到资源？ 别担心！我整理了全网…...

编程日记 2025/2/21 13:10:43

win32汇编环境,对话框中使用菜单示例一

;运行效果 ;win32汇编环境,对话框中使用菜单示例一 ;最基本的应用，即添加菜单及点击后响应的操作方法 ;直接抄进RadAsm可编译运行。重要部分加备注。 ;下面为asm文件 ;>>>>>>>>>>>>>>>>>>>>>>&g…...

编程日记 2025/2/21 13:09:41

AutoDock CrankPep or ADCP进行蛋白质多肽对接

需求描述使用AutoDock CrankPep or ADCP进行蛋白质多肽对接硬件及系统配置自用电脑型号如下： 电脑：Precision Tower 7810 (Dell Inc.) CPU ： Intel Xeon CPU E5-2686 v4 2.30GHz GPU： NVIDIA GeForce GTX 1070 Linux版本&a…...

编程日记 2025/2/21 13:08:40

高压直流熔断器研究

1.1 定义与作用高压直流熔断器是一种用于直流电路的过电流保护装置，其主要作用是在电路中检测到过载电流或短路电流时，迅速切断电路，以防止电力设备受损或发生火灾等事故。根据 ISO-8820 和 QC/T420-2004 等标准的定义，熔断器是…...

编程日记 2025/2/21 13:07:37

微信小程序（uni）+蓝牙连接+Xprint打印机实现打印功能

1.蓝牙列表实现，蓝牙设备展示，蓝牙连接 <template><view class"container"><view class"container_top"><view class"l">设备名称</view><view class"r">{{state.phoneNam…...

编程日记 2025/2/21 13:05:35

使用 Docker 部署 Flask 应用

使用 Docker 部署 Flask 应用一、引言在现代软件开发中，应用的部署和环境管理是至关重要的环节。传统的部署方式常常会遇到 “在我机器上能运行，在你机器上不行” 的问题，而 Docker 的出现很好地解决了这个痛点。Docker 是一个用于开发、部署和运行应用程序的开放平台，…...

编程日记 2025/2/21 13:04:33

深入浅出GraphQL：现代API设计的未来

文章目录一、引言二、什么是GraphQL？三、GraphQL的优势3.1 精确获取数据3.2 强类型系统3.3 单一端点3.4 实时数据四、实际应用4.1 定义Schema4.2 实现解析器4.3 启动GraphQL服务器五、结论一、引言在当今的 Web 开发中，API（应用程序编程…...

编程日记 2025/2/21 13:02:22

深入理解Zookeeper：分布式系统的协调者

引言在现代分布式系统中，协调和管理多个节点之间的状态和行为是一个复杂且关键的任务。Zookeeper作为一个分布式协调服务，为开发者提供了一种高效、可靠的方式来处理分布式系统中的一致性问题。本文将介绍Zookeeper的基本概念、使用场景以及如何通过示…...

编程日记 2025/2/21 13:01:20

python绘图之回归拟合图

回归拟合图在数据分析中具有重要作用，它不仅可以帮助我们理解变量之间的关系，还可以评估模型的拟合效果、进行预测和推断、发现异常值，以及用于模型比较和结果展示。 import pandas as pd import seaborn as sns import matplotlib.pyplot as…...

编程日记 2025/2/21 13:00:17

C语言学习笔记(第二部份)

说明：由于所有内容放在一个md文件中会非常卡顿，本文件将接续C.md文件的第二部分结构体结构是一些值的集合，这些值称为成员变量。结构的每个成员可以是不同类型的变量。结构体的成员可以是标量，数组，指针&#xff0c…...

编程日记 2025/2/21 12:59:13

jQuery UI CSS 框架 API

jQuery UI CSS 框架 API 概述 jQuery UI 是一个基于 jQuery 的用户界面和交互库，它提供了一套丰富的交互组件和视觉效果，旨在帮助开发者快速构建具有吸引力和互动性的网页应用。jQuery UI CSS 框架 API 是 jQuery UI 的一部分，它允许开发者通过简单的 CSS 类来控制 UI 组件…...

编程日记 2025/2/21 12:58:07

Redis7——基础篇（六）

前言：此篇文章系本人学习过程中记录下来的笔记，里面难免会有不少欠缺的地方，诚心期待大家多多给予指教。基础篇： Redis（一）Redis（二）Redis（三）Redis&#x…...

编程日记 2025/2/21 12:56:01

Windows网络安全基础

随着互联网的发展和普及，Windows网络安全问题愈发严重。在本文中，我们将会介绍Windows网络安全的基本概念，包括网络攻击类型、网络安全威胁、网络安全防御措施等等，帮助初学者更好地了解Windows网络安全。一、网络攻击类型网络…...

编程日记 2025/2/21 12:54:59

spring boot知识点4

1.如何监视所有spring boot微服务安装actuator插件，然后通过接口查询 /actuator/health 2.spring boot项目性能如何优化 a.优化启动时间，去除重复的依赖 b.JVM优化（java虚拟机优化），限制堆的最小最大值 c.数据库…...

编程日记 2025/2/21 12:52:56

【大模型系列篇】DeepSeek-R1如何通过强化学习有效提升大型语言模型的推理能力？

如何通过强化学习（RL）有效提升大型语言模型（LLM）的推理能力？ 《DeepSeek-R1: Incentivizing Reasoning Capability in LLMs via Reinforcement Learning》由DeepSeek-AI团队撰写，主要介绍了他们开发的第一代…...

编程日记 2025/2/21 12:50:53

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...

编程新知 2025/9/22 11:25:47

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

python打卡day49

知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/9/21 5:06:39

python/java环境配置

环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...

编程新知 2025/9/23 10:19:08