javascript读取本机文件 javascript 读取文件

转载

jack 2023-07-22 14:34:47

文章标签 javascript读取本机文件 javascript 前端 html 压缩文件 文章分类 JavaScript 前端开发

在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 方法之外，还可以使用 readAsDataURL 和 readAsArrayBuffer 方法来读取文件内容。

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

如果要处理图像文件，还可以使用 createObjectURL 或 URL.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 库压缩文件的流程如下：

加载 JSZip 库：在 HTML 文件中通过 script 标签加载 jszip.js 文件。
创建 JSZip 对象：使用 new JSZip() 方法创建一个 JSZip 对象。
添加文件：使用 JSZip 对象的 file() 方法添加需要压缩的文件，例如：zip.file("file1.txt", "content1")。
生成压缩文件：使用 JSZip 对象的 generateAsync() 方法生成压缩文件，可以指定压缩格式，例如：zip.generateAsync({type:"blob"}).then(function (content) {…})。
下载压缩文件：使用浏览器的 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 库或框架可以帮助我们更加方便地处理文件，例如：