当前位置: 首页 > news >正文

前端JS 使用input完成文件上传操作,并对文件进行类型转换

使用input实现文件上传

// 定义一个用于文件上传的按钮<input type="file" name="upload1" />// accept属性用于定义允许上传的文件类型, onchange用于绑定文件上传之后的相应函数<input type="file" name="upload2" id="upload" accept=".jpg,.jpeg,.png" onchange="handleFileSelect(event)" />

在这里插入图片描述
上图所示是input type=“file”渲染出来的文件上传按钮,点击这个按钮,计算机就会触发文件上传操作。

前端自定义input上传按钮的样式

如上图所示,这是input type="file"在页面上渲染出来的原生的样式,但是在项目中实际使用时我们一般都会设置一个自定义的样式,毕竟原生的样式通常和我们的页面风格不统一。

直接在input标签上写CSS代码不起作用,在项目开发中通常使用隐藏input标签,然后在input标签上层覆盖一个自定义的标签,然后我们对这个自定义的标签设计样式。

<div style="flex: 4" id="left-upload"><!-- 设置 opacity: 0;--><input type="file" name="upload" id="upload" accept=".jpg,.jpeg,.png" style="float: left; opacity: 0;"onchange="handleFileSelect(event)" /><!-- 使用div标签覆盖,并自定义div的样式 --><div class="region region-upload"></div>
</div>
<style>.region {width: 100%;height: 100%;background-color: #fafafa;border: 1px dashed rgb(224, 219, 219);}.region-upload {z-index: 10;cursor: hand;}
</style>

获取input上传的文件

// 第一种方法,通过document.getElementById获取
var uploadElement = document.getElementById('upload1');
var file1 = uploadElement.files[0];// 第二种方法,通过onchane函数获取
function handleFileSelect(e){var file2 = e.target.files[0];
}

在这里插入图片描述
这两种方法效果相同,获取到的是上传的File对象,通过这个对象,可以知道上传文件的name、size、type等数据。

文件对象类型转换

这里常用的一般有File对象、Base64对象、BLOB对象、ArrayBuffer对象这几种,

  • File对象一般是前面的input标签上传文件之后的对象
  • Base64 是一种由64个可打印字符组成的对二进制编码的规则,这一般是个字符串。
  • Blob是一个二进制大对象,可以容纳可变数量的数据。有4中BLOB类型: TINYBLOB、BLOB、MEDIUMBLOB、LONGBLOB。这四种BLOB类型存储值的最大长度不同。
  • ArrayBuffer 是一个字节数组,用来表示通用的、长度固定的原始二进制数据缓冲区。

File to base64

// 方法一 利用URL.createObjectURL()
var file = uploadElement.files[0];
var imgUrl = window.URL.createObjectURL(file);// 方法二 利用FileReader.readAsDataURL()
const fr = new FileReader(file);
fr.readAsDataURL(file);
fr.onload = (r) => {var imgUrl2 = r;
}

base64 to file or blob

var base = 'data:image/png;base64,iVBORw0KGgoAAAANSU...';
// 第一种
function dataURLToFile(){const arr = base.split(',');const mime = arr[0].match(/:(.*?);/)[1];const bstr = atob(arr[1]); // base64解码const n = bstr.length;const u8arr = new Unit8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}// filereturn new File([u8arr], 'xxx.png', {type: mime});// blobreturn new Blob([a8arr], {type: mime});
}// 第二种
function dataURItoBlob = (dataURL) => {  var byteString = atob(dataURL.split(',')[1]);  var mimeString = dataURL.split(',')[0].split(':')[1].split(';')[0];  var ab = new ArrayBuffer(byteString.length);  var ia = new Uint8Array(ab);  for (var i = 0; i < byteString.length; i++) {  ia[i] = byteString.charCodeAt(i);  }  return new Blob([ab], {type: mimeString});  
}

Blob to ArrayBuffer

var blob = new Blob([1,2,3,4])
var reader = new FileReader();
reader.onload = function(result) {console.log(result);
}
reader.readAsArrayBuffer(blob);

ArrayBuffer to Blob

var blob = new Blob([buffer])

JS BOM API FileReader

大部分的前端文件格式转换,都可以通过FileReader对象的API来实现:FileReader API
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

相关文章:

前端JS 使用input完成文件上传操作,并对文件进行类型转换

使用input实现文件上传 // 定义一个用于文件上传的按钮<input type"file" name"upload1" />// accept属性用于定义允许上传的文件类型&#xff0c; onchange用于绑定文件上传之后的相应函数<input type"file" name"upload2"…...

探索AI交互:Python与ChatGPT的完美结合!

大家好&#xff01;我是爱摸鱼的小鸿&#xff0c;人生苦短&#xff0c;我用Python&#xff01;关注我&#xff0c;收看技术干货。 随着人工智能的迅速发展&#xff0c;AI交互正成为技术领域的一大亮点。在这个过程中&#xff0c;Python编程语言和ChatGPT模型的结合展现出强大的…...

CI/CD - jenkins

目录 一、部署 1、简介 2、部署 二、配置 三、实时触发 四、自动化构建docker镜像 五、通过ssh插件交付任务 六、添加jenkins节点 七、RBAC 八、pipeline 九、jenkins结合ansible参数化构建 1、安装ansible 2、新建gitlab项目 3、jenkins新建项目playbook 一、部…...

【【萌新的SOC学习之 VDMA 彩条显示实验之一】】

萌新的SOC学习之 VDMA 彩条显示实验之一 实验任务 &#xff1a; 本章的实验任务是 PS写彩条数据至 DDR3 内存中 然后通过 VDMA IP核 将彩条数据显示在 RGB LCD 液晶屏上 下面是本次实验的系统框图 VDMA 通过 HP接口 与 PS端的 DDR 存储器 进行交互 因为 VDMA 出来的是 str…...

相机通用类之海康相机,软触发硬触发(飞拍),并输出halcon格式对象

//在此之前可以先浏览我编写的通用上位机类&#xff0c;更方便理解 https://blog.csdn.net/m0_51559565/article/details/134403745最近完成一个关于海康采图的demo&#xff0c;记录并说明用法。 先上代码。using System; using System.Collections.Generic; using System.Runt…...

linux时间调整

查看当前系统时间 [rootVM-12-12-centos ~]# date Sat Nov 18 16:09:11 CST 2023 Sat&#xff1a;表示星期六Saturday的缩写 Nov&#xff1a;表示十一月November的缩写 18&#xff1a;表示日期18号 16:09:11&#xff1a;时间 CST&#xff1a;China Standard Time中国标准…...

C++模版初阶

泛型编程 如下的交换函数中&#xff0c;它们只有类型的不同&#xff0c;应该怎么实现一个通用的交换函数呢&#xff1f; void Swap(int& left, int& right) {int temp left;left right;right temp; }void Swap(double& left, double& right) {double temp…...

​软考-高级-系统架构设计师教程(清华第2版)【第20章 系统架构设计师论文写作要点(P717~728)-思维导图】​

软考-高级-系统架构设计师教程&#xff08;清华第2版&#xff09;【第20章 系统架构设计师论文写作要点&#xff08;P717~728&#xff09;-思维导图】 课本里章节里所有蓝色字体的思维导图...

Go 语言结构体验证详解:validate 标签与自定义规则

介绍 Go 语言中&#xff0c;结构体验证是保障数据完整性和正确性的重要手段之一。本文将深入探讨 validate 标签的使用方式&#xff0c;并介绍如何结合验证库 go-playground/validator 进行自定义验证规则。 安装与导入验证库 首先&#xff0c;请确保已安装验证库&#xff1a…...

​软考-高级-系统架构设计师教程(清华第2版)【第19章 大数据架构设计理论与实践 (P691~716)-思维导图】​

软考-高级-系统架构设计师教程&#xff08;清华第2版&#xff09;【第19章 大数据架构设计理论与实践 &#xff08;P691~716&#xff09;-思维导图】 课本里章节里所有蓝色字体的思维导图...

深度学习YOLOv5车辆颜色识别检测 - python opencv 计算机竞赛

文章目录 1 前言2 实现效果3 CNN卷积神经网络4 Yolov56 数据集处理及模型训练5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLOv5车辆颜色识别检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0…...

c语言-浅谈指针(3)

文章目录 1.字符指针变量常见的字符指针初始化另一种字符指针初始化例&#xff1a; 2.数组指针变量什么是数组指针变量数组指针变量创建数组指针变量初始化例&#xff08;二维数组传参的本质&#xff09; 3.函数指针变量什么是函数指针变量呢&#xff1f;函数指针变量创建函数指…...

从服务器端获取人脸数据,在本地检测特征,并将特征发送给服务器

目录 1.定义函数get_database_process&#xff1a; 2.定义函数features_construct&#xff1a; 3.定义函数send_features_data&#xff1a; 4. 定义函数database_features_construct&#xff1a; 5. main 函数 1.定义函数get_database_process&#xff1a; …...

ARDUINO UNO 12颗LED超酷流水灯效果

效果代码&#xff1a; #define t 30 #define t1 20 #define t2 100 #define t3 50 void setup() { // set up pins 2 to 13 as outputs for (int i 2; i < 13; i) { pinMode(i, OUTPUT); } } /Effect 1 void loop() { effect_1(); effect_1(); effect_…...

Linux下查看pytorch运行时真正调用的cuda版本

一般情况我们会安装使用多个cuda版本。而且pytorch在安装时也会自动安装一个对应的版本。 正确查看方式&#xff1a; 想要查看 Pytorch 实际使用的运行时的 cuda 目录&#xff0c;可以直接输出 cpp_extension.py 中的 CUDA_HOME 变量。 import torch import torch.utils imp…...

​分享mfc140u.dll丢失的解决方法,针对原因解决mfc140u.dll丢失的问题

作为电脑小白&#xff0c;如果电脑中出现了mfc140u.dll丢失的问题&#xff0c;肯定会比较的慌乱。但是出现mfc140u.dll丢失的问题&#xff0c;其实也有很简单的办法&#xff0c;所以大家不用慌张&#xff0c;接下来就教大家解决办法&#xff0c;能够有效的解决mfc140u.dll丢失的…...

torch_cluster、torch_scatter、torch_sparse三个包的安装

涉及到下面几个包安装的时候经常会出现问题&#xff0c;这里我使用先下载然后再安装的办法&#xff1a; pip install torch_cluster pip install torch_scatter pip install torch_sparse 1、选择你对应的torch版本&#xff1a;https://data.pyg.org/whl/ 2、点进去然后&…...

软件安利——火绒安全

近年来&#xff0c;以优化、驱动、管理为目标所打造的软件屡见不鲜&#xff0c;大同小异的电脑管家相继走入了公众的视野。然而&#xff0c;在这日益急功近利的社会氛围驱动之下&#xff0c;真正坚持初心、优先考虑用户体验的电脑管家逐渐湮没在了浪潮之中。无论是鲁大师&#…...

Induced AI:一个专门为自动化任务而设计的AI原生浏览器RPA平台

​内容来源&#xff1a;xiaohuggg Induced AI&#xff1a;一个专门为自动化任务而设计的AI原生浏览器RPA平台 刚刚获得OpenAI CEOsama的个人投资&#xff01; 它能够模拟人类浏览网页的行为&#xff0c;自动化地浏览网页&#xff0c;搜集关键信息&#xff0c;并对这些信息进行…...

vue3中使用reactive定义的变量响应式丢失问题(大坑!!!)

前言 在Vue 3中&#xff0c;可以使用reactive函数将普通JavaScript对象转换为响应式对象&#xff0c;这样当对象的属性发生变化时&#xff0c;就会自动更新相应的UI。 但是请注意以下情况可能会丢失数据的响应式&#xff1a; 响应式丢失的情况&#xff1a; 1、对使用reactiv…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

深入浅出Diffusion模型:从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》

近日&#xff0c;嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》&#xff0c;海云安高敏捷信创白盒&#xff08;SCAP&#xff09;成功入选软件供应链安全领域产品名录。 在数字化转型加速的今天&#xff0c;网络安全已成为企业生存与发展的核心基石&#xff0c;为了解…...