js:通过input标签或Drag拖拽文件实现浏览器文件上传获取File文件对象

文档

  • https://developer.mozilla.org/zh-CN/docs/Web/API/File
  • https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/drag_event

通过读取文件可以获取File对象的信息

lastModified: 1707210706000
lastModifiedDate: Tue Feb 06 2024 17:11:46 GMT+0800 (中国标准时间) {}
name: "fileauth.txt"
size: 64
type: "text/plain"
webkitRelativePath: ""

通过input标签获取文件对象

<input type="file" /><script>let input = document.querySelector('input')input.addEventListener('change', function (e) {// 获取FileList对象console.log(e.target.files)})
</script>

遍历所有文件

// 遍历所有文件
for (let i = 0; i < files.length; i++) {// 取得一个文件let file = files[i]// 取得文件名console.log(file.name)
}

通过拖拽获取文件对象

在这里插入图片描述

<!-- 样式 -->
<style>.dropzone {border: 2px dashed #ccc;background-color: #f9f9f9;height: 200px;width: 200px;}
</style><!-- 界面 -->
<divclass="dropzone"id="dropzone"
></div><!-- 逻辑 -->
<script>let dropzone = document.querySelector('#dropzone')// 注意阻止浏览器默认行为dropzone.addEventListener('dragenter', (e) => {e.stopPropagation()e.preventDefault()console.log('dragenter')})dropzone.addEventListener('dragleave', (e) => {e.stopPropagation()e.preventDefault()console.log('dragleave')})dropzone.addEventListener('dragover', (e) => {e.stopPropagation()e.preventDefault()console.log('dragover')})dropzone.addEventListener('drop', (e) => {e.stopPropagation()e.preventDefault()console.log('drop')// 获取文件列表对象 FileListconsole.log(e.dataTransfer.files)})
</script>

参考文章

  • js实现控制文件拖拽并获取拖拽内容功能
  • Vue实现文件拖拽功能

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

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

相关文章

LeetCode 2997.使数组异或和等于K的最少操作次数

给你一个下标从 0 开始的整数数组 nums 和一个正整数 k 。 你可以对数组执行以下操作 任意次 &#xff1a; 选择数组里的 任意 一个元素&#xff0c;并将它的 二进制 表示 翻转 一个数位&#xff0c;翻转数位表示将 0 变成 1 或者将 1 变成 0 。 你的目标是让数组里 所有 元素…

Python3 运算符

什么是运算符&#xff1f; 举个简单的例子: 4 5 9 例子中&#xff0c;4 和 5 被称为操作数&#xff0c; 称为运算符。 Python 语言支持以下类型的运算符: Python算术运算符 以下假设变量 a10&#xff0c;变量 b21&#xff1a; 运算符描述实例加 - 两个对象相加a b 输…

NeurIPS 2023 Spotlight | VoxDet:基于3D体素表征学习的新颖实例检测器

本文提出基于3D体素表征学习的新颖实例检测器VoxDet。给定目标实例的多视图&#xff0c;VoxDet建立该实例的三维体素表征。在更加杂乱的测试图片上&#xff0c;VoxDet使用体素匹配算法检测目标实例。实验表明&#xff0c;VoxDet中的三维体素表征与匹配比多种二维特征与匹配要更…

Linux进程 ----- 信号处理

前言 从信号产生到信号保存&#xff0c;中间经历了很多&#xff0c;当操作系统准备对信号进行处理时&#xff0c;还需要判断时机是否 “合适”&#xff0c;在绝大多数情况下&#xff0c;只有在 “合适” 的时机才能处理信号&#xff0c;即调用信号的执行动作。 一、信号的处理…

linux系统---nginx基础

目录 一、Nginx的概念 二、Nginx常用功能 1、HTTP(正向)代理&#xff0c;反向代理 1.1正向代理 1.2 反向代理 2、负载均衡 2.1 轮询法&#xff08;默认方法&#xff09; 2.2 weight权重模式&#xff08;加权轮询&#xff09; 2.3 ip_hash 3、web缓存 三、基础特性 四…

前端开发中基于Web Speech API(speechSynthesis接口)实现文字转语音功能

文章目录 一、Web Speech 的概念及用法二、Web Speech 的 API 接口1、SpeechSynthesis属性方法 2、SpeechSynthesisUtterance属性方法 三、Web Speech 的 用法用法演示一用法演示二htmljs 四、扩展 一、Web Speech 的概念及用法 在开发业务系统时&#xff0c;有时候可能需要使…

基于SpringBoot+Apache ECharts的前后端分离外卖项目-苍穹外卖(十八)

数据展示 1. Apache ECharts1.1 介绍1.2 入门案例 2. 营业额统计2.1 需求分析和设计2.1.1 产品原型2.1.2 接口设计 2.2 代码开发2.2.1 VO设计2.2.2 Controller层2.2.3 Service层接口2.2.4 Service层实现类2.2.5 Mapper层 2.3 功能测试 3. 用户统计3.1 需求分析和设计3.1.1 产品…

chrome闪退后打不开问题 打开立即闪退

今天刚遇到&#xff0c;大概率是某些网站引起的闪退&#xff0c;重启和清理也不能解决问题 网上到处都是答非所问&#xff0c;还有什么打开chrome再进行设置这种回答 在此解决下 注意该方法根据我测试&#xff0c;唯一会损失的是chrome扩展&#xff0c;可以提前去 C:\Users…

【人脸朝向识别与分类预测】基于PNN神经网络

课题名称&#xff1a;基于PNN神经网络的人脸朝向识别分类 版本日期&#xff1a;2024-02-20 运行方式&#xff1a;直接运行PNN0503.m文件 代码获取方式&#xff1a;私信博主或 QQ:491052175 模型描述&#xff1a; 采集到一组人脸朝向不同角度时的图像&#xff0c;图像来自不…

【Spring】事务总结

目录 1. 什么是事务&#xff1f; 2. 事务的特性&#xff08;ACID&#xff09;了解么? 3. 详谈 Spring 对事务的支持 3.1. Spring 支持两种方式的事务管理 1).编程式事务管理 2)声明式事务管理 3.2. Spring 事务管理接口介绍 3.2.1. PlatformTransactionManager:事务管理…

投资黄金在哪里买比较好?

黄金&#xff0c;作为一种传统的避险资产&#xff0c;历来受到投资者的青睐。在全球经济波动的大背景下&#xff0c;黄金的价值愈发凸显。那么&#xff0c;投资黄金在哪里买比较好呢&#xff1f;本文将重点探讨在香港黄金平台投资黄金的优势&#xff0c;并以金田金业为例&#…

C++面试基础:如何高效利用CPU缓存

目录 局部性原理(Locality Principle) 数据结构的布局 缓存友好的算法 缓存大小和关联性 避免随机访问 使用缓存友好的数据结构 总结 高效利用CPU缓存是编写高性能C代码的关键之一。以下是一些在面试中可能会讨论到的方法。 局部性原理(Locality Principle) 时间局部性…

Powershell中conda init失效、无法使用conda activate的问题

起因 近期折腾了一下Windows Terminal&#xff0c;安装配置了Powershell 7.3&#xff0c;然后发现conda activate在Powershell中用不了了&#xff0c;conda init powershell不起作用&#xff0c;conda init cmd.exe没有问题 分析 因为powershell的profile.ps1文件路径中存在…

ELK 简介安装

1、概念介绍 日志介绍 日志就是程序产生的&#xff0c;遵循一定格式&#xff08;通常包含时间戳&#xff09;的文本数据。 通常日志由服务器生成&#xff0c;输出到不同的文件中&#xff0c;一般会有系统日志、 应用日志、安全日志。这些日志分散地存储在不同的机器上。 日志…

网络层的DDoS攻击与应用层的DDoS攻击之间的区别

DDoS攻击&#xff08;即“分布是拒绝服务攻击”&#xff09;&#xff0c;是基于DoS的特殊形式的拒绝服务攻击&#xff0c;是一种分布式、协作的大规模攻击方式&#xff0c;主要瞄准一些企业或政府部门的网站发起攻击。根据攻击原理和方式的区别&#xff0c;可以把DDoS攻击分为两…

The Grapes NFT 概览与数据分析

作者&#xff1a;stellafootprint.network 编译&#xff1a;cicifootprint.network 数据源&#xff1a;The Grapes NFT Collection Dashboard The Grapes 是一个有趣且具有吸引力的 NFT 收藏集合&#xff0c;包含 3,333 个精心制作的 NFT。这个 NFT 项目会在 2024 年再创高…

linux僵尸进程

僵尸进程&#xff08;Zombie Process&#xff09;是指在一个进程终止时&#xff0c;其父进程尚未调用wait()或waitpid()函数来获取该进程的终止状态信息&#xff0c;导致进程的资源&#xff08;如进程表中的记录&#xff09;仍然保留在系统中的一种状态。 当一个进程结束时&am…

GO数组解密:从基础到高阶全解

在本文中&#xff0c;我们深入探讨了Go语言中数组的各个方面。从基础概念、常规操作&#xff0c;到高级技巧和特殊操作&#xff0c;我们通过清晰的解释和具体的Go代码示例为读者提供了全面的指南。无论您是初学者还是经验丰富的开发者&#xff0c;这篇文章都将助您更深入地理解…

css美化网页元素

1.span标签的作用 能让某个文字或词语凸显出来 2.字体样式 属性 含义 示例 font-family 设置字体类型 font-family:"隶书"; font-size 设置字体大小 font-size:12px; font-style 设置字体风格 font-style:italic; font-weight 设置字体的粗细 font-we…

java使用Swagger文档报错“java.lang.NullPointerException: null”

java使用Swagger文档报错 一、问题二、解决1、报错2、源码3、方法 一、问题 java项目引入Swagger文档&#xff0c;后期因为一些原因导致Swagger文档不能使用&#xff0c;但是不影响项目运行和正常使用&#xff0c;但每次启动都会报错。 原因有可能是&#xff1a; 1、一个实体类…