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

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

news 2025/11/28 12:16:01

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

启动开发服务器：

  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进度条的文件上传功能，既保证基本功能又具备良好的用户体验。

相关文章：

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）交换排序-冒泡排序 和 快速排序

快速排序&#xff08;Quick Sort&#xff09; 和 冒泡排序&#xff08;Bubble Sort&#xff09; 都是常见的交换排序算法&#xff0c;它们的核心思想都是通过交换元素来实现排序。但是&#xff0c;它们的工作原理和性能差异非常大。下面我们来详细对比这两种排序算法&#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操作系统&#xff0c;并移植内核驱动&#xff0c;在应用程序中使用3个线程&#xff0c;分别实现控制单片机上3个led流水灯的功能、蜂鸣器控制的功能、风扇控制的功能。 需求整理&#xff1a; 1.驱动程序-->led1.c&#xff0c;led2.c&#xff…...

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

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

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

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

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

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

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

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

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

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

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

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

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

高压直流熔断器研究

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

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

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

1.蓝牙列表实现&#xff0c;蓝牙设备展示&#xff0c;蓝牙连接 <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&#xff1f;三、GraphQL的优势3.1 精确获取数据3.2 强类型系统3.3 单一端点3.4 实时数据 四、实际应用4.1 定义Schema4.2 实现解析器4.3 启动GraphQL服务器 五、结论 一、引言 在当今的 Web 开发中&#xff0c;API&#xff08;应用程序编程…...

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

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

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

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

python绘图之回归拟合图

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

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

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

说明&#xff1a;由于所有内容放在一个md文件中会非常卡顿&#xff0c;本文件将接续C.md文件的第二部分 结构体 结构是一些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量。 结构体的成员可以是标量&#xff0c;数组&#xff0c;指针&#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——基础篇（六）

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

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

Windows网络安全基础

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

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

spring boot知识点4

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

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

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

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

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

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/11/28 5:50:38

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/11/21 5:30:05

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/11/25 19:17:21

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2025/11/26 11:22:21

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2025/11/16 22:42:48

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

编程新知 2025/9/22 12:41:30

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2025/11/17 23:05:24

论文阅读：Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

编程新知 2025/11/23 15:11:58

sshd代码修改banner

sshd服务连接之后会收到字符串&#xff1a; SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢&#xff1f; 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

编程新知 2025/11/27 13:19:31