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

在这里插入图片描述

定义文件上传函数

#文件上页面
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.mzph.cn/news/117033.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

路飞项目多方式登录、手机号短信验证注册接口

登录注册页面分析 用户板块需要写的接口 用户名密码登录&#xff08;多方式登录&#xff09;获取手机验证码接口手机号验证码登录注册接口验证手机号是否存在接口 验证手机号是否存在 视图类 from rest_framework.viewsets import ViewSet from rest_framework.decorator…

YOLOv8优化:独家创新(Partial_C_Detect)检测头结构创新,实现涨点 | 检测头新颖创新系列

💡💡💡本文独家改进:独家创新(Partial_C_Detect)检测头结构创新,适合科研创新度十足,强烈推荐 Partial_C_Detect | 亲测在多个数据集能够实现大幅涨点 💡💡💡Yolov8魔术师,独家首发创新(原创),适用于Yolov5、Yolov7、Yolov8等各个Yolo系列,专栏文章提…

mac下配置环境-node以及nvm

当前配置环境主要针对于mac下系统&#xff0c;需要提前安装brew包 如需要配置&#xff0c;可查阅&#xff1a;Brew包的基本安装&#xff08;手把手教学&#xff09;-CSDN博客 如果是window环境配置&#xff0c;分享一个不错的帖子&#xff1a;nvm的安装和使用&#xff08;详细&…

【NPM】vuex 数据持久化库 vuex-persistedstate

在 GitHub 上找到&#xff1a;vuex-persistedstate。 安装 npm install --save vuex-persistedstate使用 import { createStore } from "vuex"; import createPersistedState from "vuex-persistedstate";const store createStore({// ...plugins: [cr…

Unity 通过jar包形式接入讯飞星火SDK

最近工作上遇到了要接入gpt相关内容的需求&#xff0c;简单实现了一个安卓端接入讯飞星火的UnitySDK。 或者也可以接入WebSocket接口的。本文只讲安卓实现 我使用的Unity版本为2021.3.27f1c2 Android版本为4.2.2 1.下载SDK 登陆讯飞开放平台下载如图所示SDK 2.新建安卓工程…

目标检测应用场景—数据集【NO.15】叶片虫害检测

写在前面&#xff1a;数据集对应应用场景&#xff0c;不同的应用场景有不同的检测难点以及对应改进方法&#xff0c;本系列整理汇总领域内的数据集&#xff0c;方便大家下载数据集&#xff0c;若无法下载可关注后私信领取。关注免费领取整理好的数据集资料&#xff01;今天分享…

Java实现ORM第一个api-FindAll

经过几天的业余开发&#xff0c;今天终于到ORM对业务api本身的实现了&#xff0c;首先实现第一个查询的api 老的C#定义如下 因为Java的泛型不纯&#xff0c;所以无法用只带泛型的方式实现api&#xff0c;对查询类的api做了调整&#xff0c;第一个参数要求传入实体对象 首先…

nodejs+wasm+rust debug及性能分析

文章目录 背景v8引擎自带的profilelinux的perf采集wasm三方库性能分析编译debug版本wasmrust程序debug调试异常模型正常模型结论优化 参考 Node使用火焰图优化CPU爆涨 - 掘金 【Node.js丨主题周】理解perf 与火焰图-腾讯云开发者社区-腾讯云 Easy profiling for Node.js Applic…

【1419. 数青蛙】

目录 一、题目描述二、算法原理三、代码实现 一、题目描述 二、算法原理 三、代码实现 代码实现1&#xff1a;我自己写的比较挫&#xff0c;但是比较简单。 class Solution { public:int minNumberOfFrogs(string croakOfFrogs) {unordered_map<char,int> hash;hash[c]…

函数式编程-Stream流

函数式编程.md 视频学习地址&#xff1a;00.函数式编程的重要性_哔哩哔哩_bilibili 1. 概述 1.1 为什么学&#xff1f; 能够看懂公司里的代码大数量下处理集合效率高代码可读性高消灭嵌套地狱 //查询未成年作家的评分在70以上的书籍 由于洋流影响所以作家和书籍可能出现重复…

word修改公式默认字体并打出漂亮公式

文章目录 word公式简介传统方法1——mathtype传统方法2——word自带公式编辑器最简洁方法——更改word自带公式字体快捷方式效果展示 word公式简介 word自带的公式字体Cambria Math不可否认很丑&#xff0c;要打出latex格式的漂亮字体很困难。使用Markdown工具很多只能导出为不…

MSVCR100.dll丢失修复方法,MSVCR100.dll丢失的解决方法

今天我要和大家分享的是&#xff1a;msvcr100.dll丢失的6种解决方法。 首先&#xff0c;让我们来了解一下msvcr100.dll丢失的原因。msvcr100.dll是Microsoft Visual C 2010的一个组件&#xff0c;它包含了许多运行库文件&#xff0c;这些文件是许多应用程序所必需的。当msvcr1…

使用 DCGAN 生成动漫面孔-附训练数据集下载

介绍 在这个项目中,我们的目标是使用深度卷积生成对抗网络(DCGAN)算法生成高质量的动漫面孔。该项目使用的数据集包含 63,632 个动漫面孔,经过精心策划,以确保质量和吸引力。这个项目背后的动机是实现一个简单的梦想,即生成完美的 waifus,可爱的女性动漫面孔,捕捉动漫…

算法、语言混编、分布式锁与分布式ID、IO模型

一、算法初识 数据结构和算法是程序的基石。我们使用的所有数据类型就是一种数据结构&#xff08;数据的组织形式&#xff09;&#xff0c;写的程序逻辑就是算法。 算法是指用来操作数据、解决程序问题的一组方法。 对于同一个问题&#xff0c;使用不同的算法&#xff0c;也…

python socket网络编程(传输一个图片数据)

服务端 import base64 import socket import numpy as np import cv2 import datetime import os sssocket.socket(socket.AF_INET,socket.SOCK_STREAM) ss.bind(("192.168.1.65",5)) #服务器绑定ip ss.listen(5) #开始监听 tcp1,addss.accept() #阻塞进程&#…

1024节日

程序员节日

编译原理-词法分析器

文章目录 对于词法分析器的要求概念词法分析器的功能和输出形式 词法分析器的设计词法分析器的结构单词符号的识别&#xff1a;超前搜索状态转换图 正规表达式和有限自动机正规式和正规集确定有限自动机&#xff08;DFA&#xff09;非确定有限自动机&#xff08;NFA&#xff09…

ubuntu 给apt的apache2编译php7.1

环境&#xff1a;Ubuntu18.04.1和Kylin 需求&#xff1a;给apt安装的apache2使用编译的php7.1&#xff08;扩展&#xff09; php7.1发行源码下载地址&#xff1a;Unsupported Historical Releases 安装依赖包&#xff1a; # 基础依赖包 apt install pkg-config libxml2 libxm…

小程序原生开发中的onLoad和onShow

在小程序的原生开发中&#xff0c;onLoad和onShow是两个常用的生命周期函数&#xff0c;用于管理页面的加载和显示。 onLoad&#xff1a;该函数会在页面加载时触发。当页面第一次加载时&#xff0c;它会被调用一次&#xff0c;之后切换到其他页面再返回时不会再触发。可以在on…