Django学习笔记——文件上传(界面还怪好看得嘞)

news/2024/12/2 19:02:00/

在这里插入图片描述

定义文件上传函数

#文件上页面
def uploadFileIndex(request):return render(request, "uploadFile.html")#文件上传接口
def uploadFile(request):if request.method == 'POST' and request.FILES['file']:uploaded_file = request.FILES['file']fs = FileSystemStorage()# 选择要保存文件的目录,例如 "media/uploads/"# 请确保该目录在Django的设置中已正确配置save_path = "./upload/"# 检查目录是否存在,如果不存在,则创建它if not os.path.exists(save_path):os.makedirs(save_path)# 将文件保存到指定目录filename = fs.save(os.path.join(save_path, uploaded_file.name), uploaded_file)# 获取保存后的文件URLfile_url = fs.url(filename)# 打印文件保存路径和URLprint("文件已保存到:", filename)print("文件URL:", file_url)return render(request, "success.html", {"msg": "上传成功", "file_url": file_url})return render(request, "error.html", {"msg": "上传失败"})

定义文件上传HTML界面

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>文件上传</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;min-height: 100vh;}.container {background-color: #fff;border-radius: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);width: 400px;padding: 30px;text-align: center;}h1 {color: #3498db;}label {display: block;font-weight: bold;margin-top: 20px;}input[type="file"] {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 5px;}input[type="submit"] {background-color: #3498db;color: #fff;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;}.fa-cloud-upload-alt {font-size: 48px;color: #3498db;}</style>
</head>
<body><div class="container"><h1>文件上传 <i class="fas fa-cloud-upload-alt"></i></h1><form action="/uploadFile" method="post" enctype="multipart/form-data">{% csrf_token %}<label for="file">选择文件:</label><input type="file" name="file" id="file"><input type="submit" value="上传文件"></form></div>
</body>
</html>

在这里插入图片描述

定义成功请求页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>请求成功 - 200 OK</title><style>body {font-family: Arial, sans-serif;background-color: #f8f8f8;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;min-height: 100vh;}.container {background-color: #fff;border-radius: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);width: 400px;padding: 30px;text-align: center;}h1 {color: #3498db;font-size: 28px;margin: 0;margin-bottom: 10px;}p {color: #555;font-size: 16px;margin: 10px 0;}.success-icon {color: #3498db;font-size: 64px;margin-bottom: 20px;}</style>
</head>
<body><div class="container"><i class="fas fa-check-circle success-icon"></i><h1>请求成功 - 200 OK</h1><p>您的请求已成功处理。</p><p>{{ msg }}</p></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

定义错误返回页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内部服务器错误 - 500</title><style>body {font-family: Arial, sans-serif;background-color: #f8f8f8;text-align: center;margin: 0;padding: 0;}.error-container {background-color: #fff;max-width: 400px;margin: 0 auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;margin-top: 100px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}.error-container h1 {color: #e74c3c;font-size: 24px;margin: 0;}.error-container p {margin-top: 10px;color: #333;}</style>
</head>
<body>
<div class="error-container"><h1>内部服务器错误 - 500</h1><p>服务器在处理您的请求时遇到了一个内部错误。</p><p>{{ msg }}</p>
</div>
</body>
</html>

在这里插入图片描述


http://www.ppmy.cn/news/1174137.html

相关文章

RHCSA常用命令总结

RHCSA回顾 1.Linux学习环境的安装部署 VMware虚拟机rhel9.x 磁盘容量&#xff1a;20GB cpu:1颗2核心 内存&#xff1a;2G 网卡&#xff1a;NAT 新CD/DVD设置镜像源文件 取消显示器的3d支持 &#xff08;1&#xff09;安装RHEL9 (2)组件&#xff1a;带有GUI的服务器 (3)分区…

hive针对带有特殊字符非法json数据解析

一、背景 有的时候前端或者后端进行埋点日志&#xff0c;会把json里面的数据再加上双引号&#xff0c;或者特殊字符&#xff0c;在落日志的时候&#xff0c;组装的格式就不是正常的json数据了&#xff0c;我们就需要将带有特殊字符的json数据解析成正常的json数据。 二、正则…

AD20~PCB的板层设计和布线

1、打开51单片机最小系统的工程文件。 2、完成原理图后续工作&#xff1a;打开原理图文件&#xff0c;双击元件“CH340X”窗口右边弹出元件内部属性设置界面&#xff0c;在窗口下方点击“Footprint ->Add…”按钮进入添加元件类型界面&#xff0c;进入元件封装选择界面&…

CPU眼里的C/C++:1.2 查看变量和函数在内存中的存储位置

写一个很简单的 c 代码&#xff0c;打印一些“地址”&#xff0c; 也就是变量、函数的“存储位置”&#xff1a;当程序被加载到内存后&#xff0c;它们具体是存在哪里&#xff0c;可以用精确的数值来表示&#xff0c;这就是内存地址。 https://godbolt.org/z/Ghh9ThY5Y #inc…

Java反射获取内部类方法

Java反射获取内部类方法 结论一、案例准备二、测试方法&#xff1a;使用反射获取类的成员内部类和方法具体操作具体操作&#xff08;使用getDeclaredClasses&#xff09; 结论 Java 通过反射可以获得内部类&#xff0c;包括内部类属性信息和方法。 一、案例准备 创建了一个类…

数据库基础(一)【MySQL】

文章目录 安装 MySQL修改密码连接和退出数据库服务器使用 systemctl 管理服务器进程配置数据库从文件角度看待数据库查看连接情况 安装 MySQL 这是在 Linux 中安装 MySQL 的教程&#xff1a;Linux 下 MySQL 安装。本系列测试用的 MySQL 版本是 5.7&#xff0c;机器是 centOS7.…

华为OD 拼接URL(100分)【java】B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为O…

读书笔记之《敏捷测试从零开始》(一)

大家好&#xff0c;我是rainbowzhou。 子曰&#xff1a;学而时习之&#xff0c;不亦说乎&#xff1f;今天我想和大家分享一本测试书籍——《敏捷测试从零开始》。以下为我的读书笔记&#xff1a; 精彩片段摘录&#xff1a; 焦虑往往来自于对比&#xff0c;当你在自己的圈子里面…