JavaScript 文件处理

news/2024/3/28 16:09:32/文章来源:https://blog.csdn.net/lwf3115841/article/details/129145265

JavaScript 可以通过文件 API 实现许多常见的文件处理任务,下面是一些例子:

1、读取文件内容:使用 FileReader API 可以将文件读取为 ArrayBuffer、Blob、DataURL 等格式,并进行后续处理。

JavaScript 可以使用文件 API 中 FileReader API 来读取文件内容并进行处理。

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {var file = fileInput.files[0];var reader = new FileReader();reader.onload = function () {// 在这里处理读取的文件内容};reader.readAsText(file);
});

 

如上面的代码所示,在文件选择事件中创建一个 FileReader 对象,然后调用其 readAsText 方法读取文件内容。读取完成后,可以在 onload 事件中处理读取的文件内容。

除了 readAsText 方法之外,还可以使用 readAsDataURLreadAsArrayBuffer 方法来读取文件内容。

2、图片预览:使用 URL.createObjectURL 函数将 Blob 对象转换为可以在图片标签中使用的 URL,即可实现图片预览。

如果要处理图像文件,还可以使用 createObjectURLURL.createObjectURL 来创建一个 URL 引用该图像文件,然后将其赋值给 img 元素的 src 属性来显示图像。

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {var file = fileInput.files[0];var url = URL.createObjectURL(file);var image = document.getElementById('image');image.src = url;
});

 

如上面的代码所示,在文件选择事件中创建一个 URL 引用该图像文件,然后将其赋值给 img 元素的 src 属性来显示图像。

3、文件下载:使用 URL.createObjectURL 函数将 Blob 对象转换为 URL,并设置 a 标签的 href 属性,即可实现文件下载。

通过使用 fetch API 获取文件内容,并将其写入 Blob 对象,最后利用 URL.createObjectURL 将其下载。

 

fetch('file-download-url').then(response => response.blob()).then(blob => {const url = URL.createObjectURL(blob);const link = document.createElement('a');link.href = url;link.download = 'filename';link.click();});

4、文件上传:后续打算写一下。

5、压缩文件:使用 JavaScript 库(例如 pako、jszip 等)可以实现文件压缩。

5.1、使用 pako 库压缩文件

Pako 是一个 JavaScript 库,用于实现 Gzip 和 Deflate 压缩。它提供了一个简单的 API,可以在浏览器端对数据进行压缩和解压缩。要使用 Pako,需要在项目中引入 Pako 库文件。下面是一个简单的例子,演示如何使用 Pako 进行数据压缩:

 

// 原始数据
var data = "Hello World";// 压缩数据
var compressed = pako.deflate(data, { level: 9 });// 解压缩数据
var original = pako.inflate(compressed);console.log(original.toString()); // 输出 "Hello World"

在这个例子中,我们创建了一个原始数据,使用 pako.deflate 对其进行压缩,然后使用 pako.inflate 对其进行解压缩。最后,我们使用 toString 方法将解压缩后的数据转换为字符串并在控制台中输出。

5.2、使用 JSZip 库压缩文件

JSZip 是一个 JavaScript 库,用于在浏览器中创建和解压缩 zip 文件。要使用 JSZip,需要在项目中引入 JSZip 库文件。

使用 JSZip 库压缩文件的流程如下:

  1. 加载 JSZip 库:在 HTML 文件中通过 script 标签加载 jszip.js 文件。

  2. 创建 JSZip 对象:使用 new JSZip() 方法创建一个 JSZip 对象。

  3. 添加文件:使用 JSZip 对象的 file() 方法添加需要压缩的文件,例如:zip.file("file1.txt", "content1")。

  4. 生成压缩文件:使用 JSZip 对象的 generateAsync() 方法生成压缩文件,可以指定压缩格式,例如:zip.generateAsync({type:"blob"}).then(function (content) {…})。

  5. 下载压缩文件:使用浏览器的 API 如 URL.createObjectURL() 和 a 标签的 download 属性下载压缩文件。

以下是一个使用 JSZip 库压缩文件的实例:

<!DOCTYPE html>
<html><head><script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
</head><body><input type="file" id="files"><button onclick="compressFiles();">Compress</button><script>function compressFiles() {var files = document.getElementById("files").files;var zip = new JSZip();for (var i = 0; i < files.length; i++) {zip.file(files[i].name, files[i]);}zip.generateAsync({ type: "blob" }).then(function (content) {var url = URL.createObjectURL(content);var a = document.createElement("a");a.style = "display: none";a.href = url;a.download = "compressed.zip";document.body.appendChild(a);a.click();URL.revokeObjectURL(url);document.body.removeChild(a);});}</script></body></html>

 

6、图片处理:使用 JavaScript 库(例如 fabric.js、p5.js 等)可以实现图片的编辑和处理。

7、PDF 阅读器:使用 JavaScript 库(例如 pdf.js、mozilla/pdf.js 等)可以实现在浏览器端的 PDF 阅读。

还有一些 JavaScript 库或框架可以帮助我们更加方便地处理文件,例如:

  • Dropzone.js,一个基于 JavaScript 的拖放文件上传库,可以实现文件预览、进度条等功能
  • Papaparse,一个用于解析 CSV 文件的 JavaScript 库
  • ExcelJS,一个用于读取、编辑和写入 Excel 文件的 JavaScript 库
  • SheetJS,一个用于读取和写入各种电子表格文件的 JavaScript 库

这些库可以帮助我们更加方便地处理文件,而不需要自己编写复杂的代码。

上述的插件或库都能帮助你在前端上传文件, 上传到后端还需要使用后端语言,比如node.js来处理。

总之,不同的文件类型有不同的处理方法,JavaScript 提供了丰富的文件处理能力,可以读取、解析、显示各种类型的文件。

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

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

相关文章

基于龙芯 2K1000 的嵌入式 Linux 系统移植和驱动程序设计(一)

2.1 需求分析 本课题以龙芯 2K1000 处理器为嵌入式系统的处理器&#xff0c;需要实现一个完成的嵌入式软件系统&#xff0c;系统能够正常启动并可以稳定运行嵌入式 Linux。设计网络设备驱 动&#xff0c;可以实现板卡与其他网络设备之间的网络连接和文件传输。设计 PCIE 设备驱…

我的 System Verilog 学习记录(1)

引言 技多不压身&#xff0c;准备开始学一些 System Verilog 的东西&#xff0c;充实一下自己&#xff0c;这个专栏的博客就记录学习、找资源的一个过程&#xff0c;希望可以给后来者一些借鉴吧&#xff0c;IC找工作的都加把油&#xff01; 本文是准备先简单介绍一下环境搭建…

洛谷P1125 [NOIP2008 提高组] 笨小猴 C语言/C++

[NOIP2008 提高组] 笨小猴 题目描述 笨小猴的词汇量很小&#xff0c;所以每次做英语选择题的时候都很头疼。但是他找到了一种方法&#xff0c;经试验证明&#xff0c;用这种方法去选择选项的时候选对的几率非常大&#xff01; 这种方法的具体描述如下&#xff1a;假设 maxn\…

JAVA集合之并发集合

从Java 5 开始&#xff0c;在java.util.concurrent 包下提供了大量支持高效并发访问的集合接口和实现类&#xff0c;如下图所示&#xff1a; 以CopyOnWrite开头的集合即写时复制的容器。通俗的理解是当我们往一个容器添加元素的时候&#xff0c;不直接往容器添加&#xff0c;而…

直播预告 | 嵌入式BI如何将数据分析真正融入业务流程

在信息化高速发展的今天&#xff0c;数据成为企业最有价值的资产之一。而数据本身很难直接传递有价值的信息&#xff0c;只有通过对数据进行挖掘、分析&#xff0c;才能让数据真正成为生产力。 商业智能&#xff08;BI&#xff09;应运而生&#xff0c;可以帮助企业更好地从数…

Julia 交互式命令窗口

执行 julia 命令可以直接进入交互式命令窗口&#xff1a; $ julia __ _ _(_)_ | Documentation: https://docs.julialang.org(_) | (_) (_) |_ _ _| |_ __ _ | Type "?" for help, "]?" for Pkg help.| | | | | | |/ _ | || |…

nginx的介绍及源码安装

文章目录前言一、nginx介绍二、nginx应用场合三、nginx的源码安装过程1.下载源码包2.安装依赖性-安装nginx-创建软连接-启动服务-关闭服务3.创建nginx服务启动脚本4.本实验---纯代码过程前言 高可用&#xff1a;高可用(High availability,缩写为 HA),是指系统无中断地执行其功…

win7下安装postgreSQL教程

系统环境&#xff1a;Windows 7 旗舰版 64位操作系统 安装版本&#xff1a;postgresql-9.1.4-1-windows-x64 安装步骤&#xff1a; 1、下载系统对应的软件版本&#xff1b; 2、双击“postgresql-9.1.4-1-windows-x64.exe”打开安装窗口&#xff1b; 3、Welcome页&#xff0c;…

图解操作系统

硬件结构 CPU是如何执行程序的&#xff1f; 图灵机的工作方式 图灵机的基本思想&#xff1a;用机器来模拟人们用纸笔进行数学运算的过程&#xff0c;还定义了由计算机的那些部分组成&#xff0c;程序又是如何执行的。 图灵机的基本组成如下&#xff1a; 有一条「纸带」&am…

allure简介

allure介绍allure是一个轻量级&#xff0c;灵活的&#xff0c;支持多语言的测试报告工具多平台的&#xff0c;奢华的report框架可以为dev/qa提供详尽的测试报告、测试步骤、log也可以为管理层提供high level统计报告java语言开发的&#xff0c;支持pytest,javaScript,PHP等可以…

C语言——动态内存管理

目录0. 思维导图&#xff1a;1. 为什么存在动态内存分配2. 动态内存函数介绍2.1 malloc和free2.2 calloc2.3 realloc3. 常见的动态内存错误3.1 对NULL指针的解引用操作3.2 对动态内存开辟的空间越界访问3.3 对非动态开辟内存使用free释放3.4 使用free释放一块动态开辟内存的一部…

django+celery+ RabbitMQ自定义多个消息队列

关于django celery的使用网上有很多文章&#xff0c;本文就不多做更多的说明。 本文使用版本 python3.8.15 Django3.2.4 celery5.2.7celery.py from __future__ import absolute_import, unicode_literals import os from celery import Celery from kombu import Exchange, …

毕业后想从事软件测试,现在需要学习哪些内容呢

在你选择学习之前&#xff0c;要先考虑一下这个是不是你喜欢的发展方向&#xff0c;而不是只听别人推荐就直接做了选择先了解下软件测试是做什么的以及未来发展前景&#xff0c;最后才是如何自学 软件测试就是在测试这个软件是不是能够完全按照需求运行。软件测试岗再简单点说…

Windows启动docker客户端报错:Hardware assisted virtualization and enabled in the BIOS

报错内容 : &#x1f31f;1.在控制面板中点击 启用或关闭Windows功能&#x1f31f;2.勾选如下复选框&#x1f31f;3.Windows功能中没有Hyper-V复选框怎么办?(如果有请跳过此步骤)此时不同人的电脑还会出现没有Hyper-V选项的情况1.打开 Windows PowerShell&#xff0c;输入 sys…

如何效率搭建企业流程系统?试试低代码平台吧

编者按&#xff1a;本文介绍了一款可私有化部署的低代码平台&#xff0c;可用于搭建团队流程管理体系&#xff0c;并详细介绍了该平台可实现的流程管理功能。关键词:可视化设计&#xff0c;集成能力&#xff0c;流程审批&#xff0c;流程调试天翎是国内最早从事快速开发平台研发…

Hive内部表与外部表的区别具体说明

目录 1.在/opt/atguigu/目录下&#xff0c;新建两个txt文件 2.在hadoop的web端递归创建一个目录&#xff0c;存储这两个文件 3.查看web端的文件 一、内部表&#xff1a; 1.创建一个内部表&#xff0c;并指定内部表的存储位置 2.查看内部表&#xff0c;内部表中没有数据 …

2023.2 新方案 java代码混淆 java加密 字符串加密

Java字节码可以反编译&#xff0c;特别是创业公司,很好的项目很容易被别人破解反编译,造成很严重的损失,所以本混淆方案能很好的保护源码,而且在不断迭代,增强混淆效果,异常问题处理,达到保护项目的目的&#xff1a; 本次升级包括: 2023年02年19日 : ht-confusion-project-1.8…

PK体系下的教育场景—电子白板的应用

PK体系指基于国产飞腾&#xff08;Phytium&#xff09;CPU和麒麟&#xff08;Kylin&#xff09;操作系统的技术和产业体系&#xff0c;被誉为“中国架构”&#xff0c;目前基于PK体系的相关软硬件已经广泛用于党政、金融、电信等关基行业。教育信创在国家大战略布局下&#xff…

【技术分享】Web自动化之Selenium安装

Web 应用程序的验收测试常常涉及一些手工任务&#xff0c;例如打开一个浏览器&#xff0c;并执行一个测试用例中所描述的操作。但是手工执行的任务容易出现人为的错误&#xff0c;也比较费时间。因此&#xff0c;将这些任务自动化&#xff0c;就可以消除人为因素。Selenium 可以…

理解QPSK的实质-I右手正旋-Q左手负旋

正在学习5GNR PDCCH&#xff0c;用到QPSK。作一小结。 引言 我认为像我这样一个死民科&#xff0c;非主流非科班的通信人&#xff0c;理解QPSK的意义&#xff0c;甚至不比欧拉公式&#xff0c;或者是傅里叶变换小。 因为QPSK相较于BPSK&#xff0c;是真正第一次体现了调制的…