简易跨平台上传文件,前后端demo

前端文件

<!DOCTYPE html>
<html>
<head><title>文件上传</title>
</head>
<body>
<h1>文件上传1-相对慢,需要等待本地选择的文件全部上传完成后,服务器再保存</h1>
<form id="uploadFormBatch" enctype="multipart/form-data"><input type="file" id="fileInputBatch" name="file" multiple><br><br><input type="button" id="btnBatch" value="批量提交整体上传" onclick="clearLog(); uploadFilesBatch()">
</form><h1>文件上传2-相对快-推荐使用,本地上传一个,服务器保存一个,前端循环</h1>
<form id="uploadFormOne" enctype="multipart/form-data"><input type="file" id="fileInputOne" name="file" multiple><br><br><input type="button" id="btnOne" value="批量提交循环上传" onclick="clearLog(); uploadFilesOne()">
</form>
<div id="log"></div>
<script>const url = 'http://localhost:8421'function clearLog() {const logDiv = document.getElementById('log');logDiv.innerHTML = "";  // 清空日志内容}// 获取当前时间function getDate() {var now = new Date();console.log("当前时间是:" + now);return now;}// 获取两个时间的差值function diffDate(startTime, endTime) {// 获取两个时间的时间戳var startTimeStamp = startTime.getTime();var endTimeStamp = endTime.getTime();// 计算时间差(毫秒)var differenceInMilliseconds = endTimeStamp - startTimeStamp;// 将毫秒转换为秒var differenceInSeconds = differenceInMilliseconds / 1000;console.log("两个时间的差是:" + differenceInSeconds + "秒");return differenceInSeconds;}// 时间格式化 yyyy-MM-dd HH:mm:ssfunction formatDate(date) {const pad = (num) => (num < 10 ? '0' + num : num);var year = date.getFullYear();var month = pad(date.getMonth() + 1);var day = pad(date.getDate());var hour = pad(date.getHours());var minute = pad(date.getMinutes());var second = pad(date.getSeconds());return `${year}-${month}-${day} ${hour}:${minute}:${second}`;}function uploadFilesBatch() {const files = document.getElementById('fileInputBatch').files;const butBatch = document.getElementById('btnBatch');butBatch.disabled = true;// 禁用按钮const startDate = getDate();appendLog('程序启动-准备开始上传:' + formatDate(startDate));const formData = new FormData();for (let i = 0; i < files.length; i++) {formData.append('files', files[i]);}fetch(url + '/upload_batch', {method: 'POST',body: formData}).then(response => {return response.text();}).then(data => {if (data === '文件上传成功!') {// console.log(`文件 ${files.length} 上传成功`);butBatch.disabled = false; //解除禁用const endDate = getDate();appendLog(`文件 ${files.length} 上传成功:` + formatDate(endDate));appendLog(`总共耗时:` + diffDate(startDate, endDate) + `秒`);} else {console.error(`文件 ${files.length} 上传失败`);appendLog(`文件 ${files.length} 上传失败`);}}).catch(error => {console.error(`文件 ${files.length} 上传失败: ${error}`);appendLog(`文件 ${files.length} 上传失败: ${error}`);});}function uploadFilesOne() {const files = document.getElementById('fileInputOne').files;const btnOne = document.getElementById('btnOne');btnOne.disabled = true; // 禁用按钮let index = 0;const startDate = getDate();appendLog('程序启动-准备开始上传:' + formatDate(startDate));function uploadFile(index) {const startDateOne = getDate();if (index >= files.length) {const endDate = getDate();appendLog("所有文件处理完成:" + formatDate(endDate));appendLog(`总共耗时:` + diffDate(startDate, endDate) + `秒`);btnOne.disabled = false;// 全部上传完成,解除禁用return;}const file = files[index];const formData = new FormData();formData.append('file', file);appendLog(`文件 ${file.name} 正在上传··· ···`)fetch(url + '/upload_one', {method: 'POST',body: formData}).then(response => {return response.text();}).then(data => {if (data === '文件上传成功!') {const endDateOne = getDate();appendLog(`文件 ${file.name} 上传成功,耗时:` + diffDate(startDateOne, endDateOne) + `秒`);uploadFile(index + 1);  // 递归调用上传下一个文件} else {appendLog(`文件 ${file.name} 上传失败:${data}`);uploadFile(index);  // 文件上传失败则继续上传}}).catch(error => {console.error(`文件 ${file.name} 上传失败: ${error}`);appendLog(`文件 ${file.name} 上传失败: ${error}`);});}uploadFile(index);}function appendLog(message) {const logDiv = document.getElementById('log');// logDiv.innerHTML += message + "<br>";logDiv.innerHTML = `<p>${message}</p>` + logDiv.innerHTML;}
</script>
</body>
</html>

后端文件使用python

# -*- ecoding: utf-8 -*-
# @ModuleName: test002
# 当你要使用这份文件时,
# 代表你已经完全理解文件内容的含义,
# 并愿意为使用此文件产生的一切后果,付全部责任
# @Funcation: 
# @Author: darling
# @Time: 2024-06-17 14:21
from flask_cors import CORS
from flask import Flask, request
import os
from loguru import loggerapp = Flask(__name__)
CORS(app)@app.route('/upload_one', methods=['POST'])
def upload_one():'''前端上传,批量选择后,前端循环上传,后端单个接收:return:'''file = request.files['file']  # 获取上传的文件if file:logger.info('获取到文件{}', file.filename)file.save(os.path.join('files', file.filename))  # 保存文件到当前目录logger.info('保存结束{}', file.filename)return '文件上传成功!'else:return '文件上传失败!'@app.route('/upload_batch', methods=['POST'])
def upload_batch():'''前端上传,批量选择后一次性上传,后端循环保存:return:'''files = request.files.getlist('files')  # 获取上传的文件列表if files:for file in files:logger.info('获取到文件{}', file.filename)file.save(os.path.join('files', file.filename))  # 保存文件到当前目录logger.info('保存结束{}', file.filename)return '文件上传成功!'else:return '文件上传失败!'if __name__ == '__main__':app.run(host='0.0.0.0', port=8421)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/36974.shtml

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

相关文章

ORA-01775: 同义词的循环链问题

一、问题描述 ORA-01775: 同义词的循环链问题 二、 原因分析 同义词对应的对象&#xff08;表等&#xff09;已删除&#xff0c;不存在了。 可能原因&#xff1a; 删除数据库对象&#xff0c;但是忘记删除同义词。删除一个用户&#xff0c;但忘记删除此用户中相关的同义词…

@Param参数

Param参数 当方法参数大于两个的时候必须传递&#xff0c;只有一个的时候可以不传。大于两个的时候也可以用#{arg0}和#{arg1}。。。来取值 Param&#xff08;&#xff09;括号里面的值对应sql语句中 # {} 里面的值 看AI的解释

模版方法模式详解:使用和实现的指南

目录 模版方法模式模版方法模式结构模版方法模式适合应用场景模版方法模式优缺点练手题目题目描述输入描述输出描述题解 模版方法模式 模板方法模式是一种行为设计模式&#xff0c; 它在超类中定义了一个算法的框架&#xff0c; 允许子类在不修改结构的情况下重写算法的特定步…

《昇思25天学习打卡营第3天|张量 Tensor》

文章目录 前言&#xff1a;今日所学&#xff1a;1. 创建张量2. 张量的属性3.张量索引与运算4. NumPy与Tensor的转换5. 稀疏张量 前言&#xff1a; 张量&#xff1f;张亮&#xff1f;张量是什么&#xff1f; 张量是一个可以用来表示在一些矢量、标量和其他张量之间的线性关系的…

高并发部署:基于 Gunicorn、Flask 和 Docker

一、准备工作 确保已经安装以下软件&#xff1a; DockerDocker ComposePython 3.x 二、创建 Flask 应用 首先&#xff0c;创建一个简单的 Flask 应用。创建一个新的目录并在其中创建以下文件&#xff1a; 1. app.py python fromflask importFlask, jsonifyapp Flask(__…

leetcode 第133场双周赛 100333.统计逆序对的数目【计数dp/滚动数组/前缀和优化】

分析&#xff1a; 先考虑如下问题。 求长度为n&#xff0c;逆序对为m的排列数量。 可以考虑dp&#xff0c;dp[i][j]定义为长度为i&#xff0c;逆序对为j的排列数量。 dp[1][0] 1; //枚举排列长度&#xff0c;或者认为枚举当前需要插到长度为i-1的排列中的数字 for(int i 1…

OpenAI封杀不支持地区API:违规封号,7月9日生效

OpenAI 在检测用户使用其 API 的地区后&#xff0c;提示所有不支持位置的用户 昨晚&#xff0c;很多大模型应用的开发者、程序员都收到了 OpenAI 的警告信&#xff0c;心里一惊。 OpenAI 在检测用户使用其 API 的地区后&#xff0c;提示所有不支持位置的用户&#xff1a;即将封…

冒泡排序、选择排序、插入排序~java版

1、冒泡排序&#xff08;Bubble Sort&#xff09; 冒泡排序的基本思想是多次遍历待排序序列&#xff0c;每次遍历时两两比较相邻元素&#xff0c;如果顺序不对则交换&#xff0c;直到整个序列有序为止。 public class BubbleSort {public static void bubbleSort(int[] arr) …

图书管理系统(附源码)

前言&#xff1a;前面一起和小伙伴们学习了较为完整的Java语法体系&#xff0c;那么本篇将运用这些知识连串在一起实现图书管理系统。 目录 一、总体设计 二、书籍与书架 书籍&#xff08;Book&#xff09; 书架&#xff08;Booklist&#xff09; 三、对图书的相关操作 I…

已解决问题 | 该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的

在Chrome浏览器中&#xff0c;如果你看到“该扩展程序未列在 Chrome 网上应用店中&#xff0c;并可能是在您不知情的情况下添加的”这样的提示&#xff0c;通常是因为该扩展程序没有通过Chrome网上应用店进行安装。以下是解决这个问题的步骤&#xff1a; 解决办法&#xff1a;…

Spring Boot整合Redis缓存的最佳实践

Spring Boot整合Redis缓存的最佳实践 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在现代应用开发中&#xff0c;缓存是提升系统性能和响应速度的关键技术之…

kali/ubuntu安装vulhub

无须更换源&#xff0c;安装docker-compose apt install docker.io docker -vdocker-compose #提示没有&#xff0c;输入y安装mkdir -p /etc/docker vi /etc/docker/daemon.json #更换dockerhub国内源┌──(root㉿kali)-[/home/kali/vulhub-master/tomcat/CVE-2017-12615] …

【VScode】常规插件安装

以下是VScode常规插件安装&#xff1a; C/C C/C extension pack C/C themes Draw.io integration highlight 以上插件安装完毕后&#xff0c;可实现 字体高亮&#xff0c;自动补齐&#xff0c;函数跳转&#xff0c;主题切换&#xff0c;图表生成等常用功能。

中介子方程三十七

XXFXXuXXWXXuXXdXXrXXαXXuXpXXKXηXiXXnXXyXηXyXXnXXiXηXKXXpXuXXαXXrXXdXXuXWXπXXWXeXyXeXbXπXpXXNXXqXeXXrXXαXXuXpXXKXηXiXXnXXyXηXyXXnXXiXηXKXXpXuXXαXXrXXeXqXXNXXpXπXbXeXyXeXWXXπXWXuXXdXXrXXαXXuXpXXKXηXiXXnXXyXηXyXXnXXiXηXKXXpXuXXαXXrXXdXXuXXW…

【TensorFlow深度学习】对比学习的核心:实例与上下文的对抗

对比学习的核心&#xff1a;实例与上下文的对抗 对比学习概述实例与上下文的对抗&#xff1a;核心机制实战代码示例&#xff1a;使用PyTorch实现SimCLR结语 在深度学习的浩瀚星海中&#xff0c;对比学习作为自我监督学习的一个分支&#xff0c;正以破竹之势引领着无标注数据利用…

dledger原理源码分析系列(三)-选主

简介 dledger是openmessaging的一个组件&#xff0c; raft算法实现&#xff0c;用于分布式日志&#xff0c;本系列分析dledger如何实现raft概念&#xff0c;以及dledger在rocketmq的应用 本系列使用dledger v0.40 本文分析dledger的选主 关键词 Raft Openmessaging 心跳/选…

SpringMVC中的异常处理器

文章目录 12异常处理器12.1基于配置的异常处理HandlerExceptionResolver接口直接在springmvc中声明使用 12.2基于注解的异常处理需要书写异常的配置类 12异常处理器 12.1基于配置的异常处理 HandlerExceptionResolver接口 接口实现类&#xff1a; DefaultHandlerExceptionR…

Linux安装redis教程(超级详细,新手必看)

环境&#xff1a; Centos 7.9 一、安装准备工作 1.配置gcc 安装redis前需要配置gcc&#xff1a; yum install gcc如果配置gcc出现依赖包问题&#xff0c;可以到主页查看帖子解决&#xff1a;https://blog.csdn.net/m0_59117906/article/details/134451622?spm1001.2014.300…

这四款软件很好用,可以提升工作、学习效率

TableConvert TableConvert是一个基于Web的在线表格转换工具&#xff0c;能够将多种格式的表格数据进行快速转换。它支持将Excel、URL、HTML、JSON、CSV等格式转换为Markdown表、CSV/TSV、XML、YAML、插入SQL、HTML、Excel和LaTeX等格式。用户只需将表格数据粘贴到编辑器&#…

设置HTML元素的背景颜色

设置HTML元素的背景颜色 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在本文中&#xff0c;我们将探讨如何使用HTML和CSS来设置HTML元素的背景颜色。背景颜色…