input上传--upload

1.HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>上传文件</title><link rel="stylesheet" href="../css/upload.css">
</head>
<body><div class="upload"><h3>上传文件</h3><div></div><input type="file"></div>
</body>
</html>
<script src="../js/upload.js"></script>

2.CSS

*{margin: 0;padding: 0;}
ul,li,ol{list-style-type: none;}
button{cursor: pointer;border: none;background: rgba(255, 255, 255, 1);}
.upload{width: 170px;height: 200px;margin: 200px auto;border: 1px #ccc solid;display: flex;flex-direction: column;align-items: center;position: relative;
}
h3{width: 100%;height: 30px;border-bottom: 1px #ccc solid;
}input{width: 170px;height: 170px;position: absolute;opacity: 0;
}
.upload>div{width: 170px;height: 170px;background: url(../image/upload.png) no-repeat center center/30% 30%;
}

3.JS

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');
fileField.addEventListener('change', function() {formData.append("file", fileField.files[0],encodeURIComponent(fileField.files[0].name));fetch("http://localhost:8080/api/upload", {method: "POST",body: formData,}).then(response => response.json()).then(res => {console.log("res:", res);}).catch(err => {console.log("err:", err);});
});

4.资源

5.运行截图

 6.下载链接

 在此处下载压缩包 

【免费】原生html,js上传文件资源-CSDN文库

7.注意事项

此压缩包 包含前后端简单交互,后端需要用到Node.js,运行口令 nodemon app.js 

或者在serve文件夹直接运行run.bat文件,运行成功后打开html即可。注意:run.bat运行成功后不要退出cmd。

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

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

相关文章

《C++并发编程实战》笔记(一、二)

一、简介 抽象损失&#xff1a;对于实现某个功能时&#xff0c;可以使用高级工具&#xff0c;也可以直接使用底层工具。这两种方式运行的开销差异称为抽象损失。 二、线程管控 2.1 线程的基本控制 1. 创建线程 线程相关的管理函数和类在头文件&#xff1a; #include <…

数据结构——线性表(C语言实现)

写在前面&#xff1a; 在前面C语言的结构体学习中&#xff0c;我提及了链表的操作&#xff0c; 学习数据结构我认为还是需要对C语言的数组、函数、指针、结构体有一定的了解&#xff0c;不然对于结构体的代码可能很难理解&#xff0c;特别是一些书籍上面用的还是伪代码&#xf…

OpenGL笔记一之基础窗体搭建以及事件响应

OpenGL笔记一之基础窗体搭建以及事件响应 总结自bilibili赵新政老师的教程 code review! 文章目录 OpenGL笔记一之基础窗体搭建以及事件响应1.运行2.目录结构3.main.cpp4.CMakeList.txt 1.运行 2.目录结构 01_GLFW_WINDOW/ ├── CMakeLists.txt ├── glad.c ├── main…

Linux基于centos7指令初学3

date指令 作用&#xff1a; date指令可以查看时间 这个指令可以进行格式化 格式&#xff1a;date %想要的内容 Y&#xff1a;年份 m&#xff1a;月份 d&#xff1a;日 H&#xff1a;时 M&#xff1a;分 S&#xff1a;秒 时间分界线可以由…

GIT相关操作,推送本地分支到远程仓库流程记录学习

git流程 切换到源文件夹&#xff1a;cd 源文件夹克隆远程仓库&#xff1a;git clone [ssh]进入项目文件夹&#xff1a;cd .\project\查看本地分支&#xff1a;git branch获取远程仓库更新&#xff0c;使远程同步&#xff1a;git fetch查看所有分支&#xff08;包括远程分支&am…

OJ-0712

示例1&#xff1a; input 8 123 124 125 121 119 122 126 123 output 1 2 6 5 5 6 0 0示例2&#xff1a; input 2 95 100 output 1 0示例3&#xff1a; input 2 100 95 output 0 1package com.wsdcode.od;import java.util.Scanner;public class Main {public static void m…

LabVIEW比例压力控制阀自动测试系统

开发了一套基于LabVIEW编程和PLC控制的比例控制阀自动测试系统。该系统能够实现共轨管稳定的超高压供给&#xff0c;自动完成比例压力控制阀的耐久测试、流量滞环测试及压力-流量测试。该系统操作简便&#xff0c;具有高精度和高可靠性&#xff0c;完全满足企业对自动化测试的需…

安装jenkins最新版本初始化配置及使用JDK1.8构建项目详细讲解

导读 1.安装1.1.相关网址1.2.准备环境1.3.下载安装 2. 配置jenkins2.1.安装插件2.2.配置全局工具2.3.系统配置 3. 使用3.1.配置job3.2.构建 提示&#xff1a;如果只想看如何使用jdk1.8构建项目&#xff0c;直接看3.1即可。 1.安装 1.1.相关网址 Jenkins官网&#xff1a;https…

RabbitMq如何保证消息的可靠性和稳定性

RabbitMq如何保证消息的可靠性和稳定性 rabbitMq不会百分之百让我们的消息安全被消费&#xff0c;但是rabbitMq提供了一些机制来保证我们的消息可以被安全的消费。 消息确认 消息者在成功处理消息后可以发送确认&#xff08;ACK&#xff09;给rabbitMq&#xff0c;通知消息已…

Hadoop-25 Sqoop迁移 增量数据导入 CDC 变化数据捕获 差量同步数据 触发器 快照 日志

章节内容 上节我们完成了如下的内容&#xff1a; Sqoop MySQL迁移到HiveSqoop Hive迁移数据到MySQL编写脚本进行数据导入导出测试 背景介绍 这里是三台公网云服务器&#xff0c;每台 2C4G&#xff0c;搭建一个Hadoop的学习环境&#xff0c;供我学习。 之前已经在 VM 虚拟机…

计算机的错误计算(二十九)

摘要 &#xff08;1&#xff09;讨论近似值的错误数字个数。有时&#xff0c;遇到数字9或0, 不太好确认近似值的错误数字个数。&#xff08;2&#xff09;并进一步解释确认计算机的错误计算&#xff08;二十八&#xff09;中一个函数值的错误数字个数。 理论上&#xff0c;我…

py2neo常用语句

1.连接数据库 Neo4j服务器默认的端口号就是7474,所以本地的主机就是"http://localhost:7474" 。 默认的用户名密码都是neo4j&#xff0c; # 连接数据库&#xff0c;输入个人配置 graph Graph("http://localhost:7474//browser/", auth("neo4j"…

百日筑基第十九天-一头扎进消息队列2

百日筑基第十九天-一头扎进消息队列2 消息队列的通讯协议 目前业界的通信协议可以分为公有协议和私有协议两种。公有协议指公开的受到认可的具有规 范的协议&#xff0c;比如 JMS、HTTP、STOMP 等。私有协议是指根据自身的功能和需求设计的协 议&#xff0c;一般不具备通用性&…

数学建模·熵权法

熵权法 一种计算评价指标之间权重的方法。熵权法是一种客观的方法&#xff0c;没有主观性&#xff0c;比较可靠。 具体定义 熵权法的核心在于计算信息熵&#xff0c;信息熵反映了一个信息的紊乱程度&#xff0c;体现了信息的可靠性 具体步骤 Step1正向化处理 将所以评价指标转…

智能家居装修怎么布线?智能家居网络与开关插座布置

打造全屋智能家居。计划的智能家居方案以米家系列为主&#xff0c;智能家居联网方案以无线为主。装修前为了装备智能家居做了很多准备工作&#xff0c;本文深圳侨杰智能分享一个智能家居装修和布线方面的心得与实战知识。希望能对大家的装修有所帮助。 ​1.关于网络 如果房子比…

HTML基本标签(二)

HTML基本标签&#xff08;二&#xff09; 表格标签 table媒体元素audio 音频vido 视频 form 表单元素 表格标签 table <!-- caption 代表表格标题相关属性border 边框cellpadding 设置单元格内填充cellspacing 设置单元格间空隙width 设置表格宽度&#xff0c;默认是内容撑…

Python-数据爬取(爬虫)

~~~理性爬取~~~ 杜绝从入门到入狱 1.简要描述一下Python爬虫的工作原理&#xff0c;并介绍几个常用的Python爬虫库。 Python爬虫的工作原理 发送请求&#xff1a;爬虫向目标网站发送HTTP请求&#xff0c;通常使用GET请求来获取网页内容。解析响应&#xff1a;接收并解析HTTP响…

结合实体类型信息1——基于本体的知识图谱补全深度学习方法

1 引言 1.1 问题 目前KGC和KGE提案的两个主要缺点是:(1)它们没有利用本体信息;(二)对训练时未见的事实和新鲜事物不能预测的。 1.2 解决方案 一种新的知识图嵌入初始化方法。 1.3 结合的信息 知识库中的实体向量表示&#xff0b;编码后的本体信息——>增强 KGC 2基…

基于AT89C51单片机超声波水位液位控制系统设计(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于AT89C51单片机的1616点阵LED显示器字符滚动显示设计的详情介绍&#xff0c;如果对您有帮助的话&#xff0c;还请关注一下哦&#xff0c;如果有资源方面的需要可以联系我。 目录 设计任务与要求 原理图 仿真图 代码 系统论文 资源下载 设计任务与要求…

处理线程安全的列表CopyOnWriteArrayList 和Collections.synchronizedList

ConcurrentModificationException 是 Java 中的一种异常&#xff0c;用于指示在迭代集合时&#xff0c;该集合的结构发生了并发修改。 在 Java 中&#xff0c;许多集合类&#xff08;如 ArrayList, HashMap 等&#xff09;都不是线程安全的。如果一个线程在迭代集合的同时&…