【Effective Web】文件上传

文章目录

  • 前言
  • 一、选择本地文件
    • 1.设计一个上传文件按钮
    • 2.FileReader读取文件内容
  • 二、使用拖拽方式
    • 1.设计一个拖拽容器
    • 2.拖拽文件的相关事件回调
  • 三、使用粘贴方式
    • 1.设计一个粘贴容器
    • 2.paste事件回调
  • 四、总结


前言

前端无法像app一样直接操作本地文件,对本地文件的操作和上传,通常使用以下三种方式:

  1. 通过input type = file 选择本地文件上传,这是最常见的方式
  2. 通过拖拽的方式把文件拖过来
  3. 在编辑框里面复制黏贴,这种方式常见于上传图片。

一、选择本地文件

1.设计一个上传文件按钮

通过input type = file 选择本地文件上传,通常会自定义一个按钮,然后盖在上面,因为type=file的input不容易改变样式。
这里使用label做样式覆盖,label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

注意:label中的for属性应与input元素的id一致

    <form id="form"><label for="submit"><div class="lBut"><span>选择文件</span></div></label><input id="submit" type="file" /></form>
  #submit {display: none;}.lBut {width: 87px;height: 24px;font-size: 14px;line-height: 24px;display: flex;justify-content: center;align-items: center;border-radius: 4px;margin-left: 28px;transition: all 0.5s;white-space: nowrap;background-color: #409eff;color: white;border: 1px solid #409eff;}

而通过表单选择的文件无法直接获取文件真实存放路径,文件里面内容也无法查看。formData格式的文件可以作为接口参数传给后台。

  const inputFile = document.getElementById("submit");const form = document.getElementById("form");inputFile.addEventListener("change", function () {let formData = new FormData(form);console.log("formData :>> ", formData);console.log("inputFile.value :>> ", inputFile.value);});

在这里插入图片描述

2.FileReader读取文件内容

当选择文件后,触发input的change事件,在change的回调方法中初始化一个fileReader对象,fileReader有一个方法readAsDataURL可以读取文件并转为base64格式。在fileReader读取文件后触发onload回调方法,在回调方法中获取文件的结果,并创建一个img元素把结果作为src属性值,展示在页面上。
js代码如下:

const inputFile = document.getElementById("submit");const form = document.getElementById("form");inputFile.addEventListener("change", function () {let file = inputFile.files[0];if (!file) return;console.log("file :>> ", file);// 读取文件并转化为base64格式let fileReader = new FileReader();fileReader.readAsDataURL(file);fileReader.onload = function () {console.log("fileReader :>> ", fileReader);if (/^image\/[jpeg|png|gif]/.test(file.type)) {let img = document.createElement("img");img.src = fileReader.result;img.style.width = "500px";document.body.append(img);}};});

在这里插入图片描述

二、使用拖拽方式

1.设计一个拖拽容器

  <body><div id="container">drag your image here</div></body><style>#container {width: 500px;height: 500px;border: 1px solid #dfdfdf;margin: 0 auto;text-align: center;vertical-align: middle;}
</style>

在这里插入图片描述

2.拖拽文件的相关事件回调

容器的dragover事件和drop事件的默认行为是打开新页面展示,需要阻止默认行为
在drop事件回调中,获取拖拽的文件,数据存储在event.dataTransfer.files中,然后就可以调用fileReader.readAsDataURL或添加到formData中了

  const container = document.getElementById("container");container.addEventListener("dragover", function (event) {// 浏览器默认行为是打开新页面展示,需要阻止默认行为event.preventDefault();});container.addEventListener("drop", function (event) {console.log("event :>> ", event);event.preventDefault(); // 阻止默认的点击事件执行let file = event.dataTransfer.files[0];console.log("file :>> ", file);if (!file) return;showImg(file);});const showImg = (file) => {// 读取文件并转化为base64格式let fileReader = new FileReader();fileReader.readAsDataURL(file);fileReader.onload = function () {if (/^image\/[jpeg|png|gif]/.test(file.type)) {let img = document.createElement("img");img.src = fileReader.result;img.style.width = "500px";container.append(img);}};};

三、使用粘贴方式

1.设计一个粘贴容器

粘贴通常在一个编辑框操作,比如把div的contenteditable设置为true

<div id="container" contenteditable="true">paste your image here</div>

2.paste事件回调

粘贴的数据在event.clipboardData.files中,在容器的paste获取,代码如下:

  const container = document.getElementById("container");container.addEventListener("paste", function () {event.preventDefault();let file = event.clipboardData.files[0];console.log("file :>> ", file);if (!file) return;showImg(file);});const showImg = (file) => {// 读取文件并转化为base64格式let fileReader = new FileReader();fileReader.readAsDataURL(file);fileReader.onload = function () {if (/^image\/[jpeg|png|gif]/.test(file.type)) {let img = document.createElement("img");img.src = fileReader.result;img.style.width = "500px";container.append(img);}};};

四、总结

文件的上传常见有三种方式:选择文件、拖拽和粘贴。选择文件通常使用表单,文件的数据在form.files中,form为表单元素;拖拽的方式,文件的数据在drop事件的event.dataTransfer.files中;粘贴的方式,文件的数据在paste事件的event.clipboardData.files中;在获取上传文件的数据后,使用fileReader来读取文件数据,展示在页面上,或者添加到formData上,通过接口传递给后台。

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

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

相关文章

在Python中,当你执行 print(2, 3) 时

目录 在Python中,当你执行 print(2, 3) 时 在Python中,当你执行 print(2, 3) 时 你实际上是在调用 print 函数并传递给它两个参数:整数 2 和整数 3。print 函数会打印出这些参数,并在它们之间添加一个空格作为默认的分隔符。因此,输出将会是: 复制代码 2 3如果你希望打…

MTMT:构建比特币生态平行世界 打造铭文生态繁荣

近年来&#xff0c;随着铭文市场的火爆以及比特币ETF成功通过&#xff0c;比特币生态正经历着一场复兴&#xff0c;尤其是铭文市场作为新一代Web3的叙事&#xff0c;带来了全新的生产方式&#xff0c;可以预见&#xff0c;铭文就像流动性挖矿对于上一轮DeFi Summer的推动一样会…

vue watch 深度监听

vue2文档&#xff1a;API — Vue.js vue3文档&#xff1a;侦听器 | Vue.js watch 可以用来监听页面中的数据&#xff0c;但如果监听的源是对象或数组&#xff0c;则使用深度监听&#xff0c;强制深度遍历源&#xff0c;以便在深度变更时触发回调。 一&#xff0c;监听 <t…

蓝桥杯算法题-正则问题

问题描述 考虑一种简单的正则表达式&#xff1a; 只由 x ( ) | 组成的正则表达式。 小明想求出这个正则表达式能接受的最长字符串的长度。 例如 ((xx|xxx)x|(x|xx))xx 能接受的最长字符串是&#xff1a; xxxxxx&#xff0c;长度是 6。 输入格式 一个由 x()| 组成的正则表达式。…

ViveNAS性能调试笔记(一)

ViveNAS是一个开源的NAS文件服务软件&#xff0c;有一套独立自创的架构&#xff0c;ViveNAS希望能做到下面的目标&#xff1a; - 能支持混合使用高性能的介质(NVMe SSD)和低性能介质&#xff08;HDD&#xff0c;甚至磁带&#xff09;。做到性能、成本动态均衡。因此ViveNAS使用…

解锁背包问题:C++实现指南

文章目录 解锁背包问题&#xff1a;C实现指南01背包问题问题形式化动态规划解法C代码示例 完全背包问题动态规划解法C代码示例 结论 解锁背包问题&#xff1a;C实现指南 背包问题是计算机科学中的经典优化问题&#xff0c;常出现在算法研究和编程面试中。它是组合优化的一个例…

python 进程、线程、协程基本使用

1、进程、线程以及协程【1】进程概念【2】线程的概念线程的生命周期进程与线程的区别 【3】协程(Coroutines) 2、多线程实现【1】threading模块【2】互斥锁【3】线程池【4】线程应用 3、多进程实现4、协程实现【1】yield与协程【2】asyncio模块【3】3.8版本【4】aiohttp 1. 并发…

网络基础(二)——序列化与反序列化

目录 1、应用层 2、再谈“协议” 3、网络版计算器 Socket.hpp TcpServer.hpp ServerCal.hpp ServerCal.cc Protocol.hpp ClientCal.cc Log.hpp Makefile 1、应用层 我们程序员写的一个个解决我们实际问题&#xff0c;满足我们日常需求的网络程序&#xff0c;都是在…

周报_第四十七周

周报_第四十七周 时间 2023.3.25——2023.3.31 科研进展 整理实验后发现在多次实验下triplet loss带来的平均提升无法与L1等传统抗过拟合方法拉开差距&#xff0c;之前的实验阶段triplet loss提升较大可能是由于实验次数不够出现的偶然现象。 目前在多尝试超参数组合并选择结…

AtCode DP专练A-P

链接&#xff1a;Educational DP Contest - AtCoder A - Frog 1 题意&#xff1a;有n个石头&#xff0c;从1石头出发&#xff0c;每次可以跳一格或者俩格&#xff0c;代价为俩个格子间的高度差 思路&#xff1a;对于第i个石头&#xff0c;可以从石头i-1和i-2得到&#xff0c…

31.Python从入门到精通—Python数据压缩 性能度量 测试模块

31.从入门到精通&#xff1a;Python数据压缩 性能度量 测试模块 个人简介数据压缩性能度量测试模块 个人简介 &#x1f3d8;️&#x1f3d8;️个人主页&#xff1a;以山河作礼。 &#x1f396;️&#x1f396;️:Python领域新星创作者&#xff0c;CSDN实力新星认证&#xff0c…

2024.2.10力扣每日一题——二叉树的中序遍历

2024.2.10 题目来源我的题解方法一 递归方式方法二 非递归方式 题目来源 力扣每日一题&#xff1b;题序&#xff1a;94 我的题解 方法一 递归方式 使用递归实现&#xff0c;结果List也可以定义为一个类变量。 按照访问左子树——根节点——右子树的方式遍历这棵树&#xff0…

解决tmux中astronvim颜色显示问题

具体原因可以查看Vim在tmux中颜色改变/不同的问题这篇文章&#xff0c;此处仅展示对于astronvim如何修改init.lua文件以及如何修改tmux的.tmux.conf配置文件。 可能需要的操作——将bash修改为xterm256 使用echo $TERM可以查看是否为xterm256&#xff0c;如若不是&#xff0c…

分类预测 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积长短期记忆网络多输入分类预测

分类预测 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积长短期记忆网络多输入分类预测 目录 分类预测 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积长短期记忆网络多输入分类预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 MATLAB实现BO-CNN-LSTM贝叶斯优化卷积长短期记…

深度好文:解决Ubuntu 18.04安装nvidia显卡驱动,导致内核不匹配:无需重装系统修复内核

深度好文&#xff1a;解决Ubuntu 18.04安装nvidia显卡驱动&#xff0c;导致内核不匹配&#xff1a;无需重装系统修复内核 目录 一、问题描述二、尝试修复三、安装Nvidia驱动和CUDA并配置cuDNN四、总结 一、问题描述 昨天打算更新一下Ubuntu 18.04的显卡驱动&#xff0c;以支持…

Eclipse新建java类的操作流程

一、在左侧空白区域&#xff0c;点击鼠标右键。 二、点击new&#xff0c;选择Java Project &#xff08;由于这里不知道怎么截图&#xff0c;就用手机拍了一张&#xff0c;希望不要介意&#xff09; 三、 给project文件起个名字&#xff0c;其他都不用管&#xff0c;点击Finis…

云防护是怎么能帮助用户做好网络安全

在数字化时代&#xff0c;网络安全威胁呈现出愈发复杂和多样化的趋势。 无论是个人用户、小型企业还是大型企业&#xff0c;都面临着来自全球各地的网络攻击风险。这些攻击可能导致数据泄露、服务中断、财务损失甚至声誉受损。因此&#xff0c;采取有效的安全防护措施变得至关…

Linux内存管理 —— 通过实验学习和理解CoW(1)

文章目录 作者环境概述正文测试程序实验1:虚拟地址区域的分配实验2:验证通过缺页异常实验物理页的按需分配实验3:验证fork操作后,父子进程页表属性的变化实验4: 验证父进程的Cow实验5:验证父进程发生CoW后,子进程发生写操作时的行为作者 pengdonglin137@163.com 环境 …

HarmonyOS 应用开发之Stage模型启动FA模型PageAbility

本小节介绍Stage模型的两种应用组件如何启动FA模型的PageAbility组件。 UIAbility启动PageAbility UIAbility启动PageAbility和UIAbility启动UIAbility的方式完全相同。 说明&#xff1a; 需注意FA模型中abilityName由bundleName AbilityName组成&#xff0c;具体见示例。 i…

不允许你不知道的 MySQL 优化实战(一)

文章目录 1、查询SQL尽量不要使用select *&#xff0c;而是select具体字段。2、如果知道查询结果只有一条或者只要最大/最小一条记录&#xff0c;建议用limit 13、应尽量避免在where子句中使用or来连接条件4、优化limit分页5、优化你的like语句6、使用where条件限定要查询的数据…