教你如何使用 JavaScript 读取文件

2024-09-29 08:32:31

使用 JavaScript 读取文件概述

选择带有输入元素的文件

在 HTML 中，您可以通过将 input 元素的 type 属性设置为 file 来选择文件。

<input type="file">

如果您想允许多个文件选择多设置属性。

<input type="file" multiple>

用户选择文件后改变将发生一个事件。

处理输入元素的变化事件

要捕获更改事件，首先：改变有一种方法可以直接在其中编写处理程序。您可以通过将其传递给 onchange 处理程序来立即在处理程序中访问输入元素，如下所示：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>File Input Test</title>
    <script>
      function fileChanged(input) {
        console.log(input);
        for (let i = 0; i < input.files.length; i++) {
          console.log(input.files[i]);
        }
      }
    </script>
  </head>
  <body>
    <input type="file" onchange="fileChanged(this)" multiple/>
  </body>
</html>

您还可以动态获取输入元素来处理更改事件。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>File Input Test</title>
    <script>
      window.addEventListener('load', () => {
        const f = document.getElementById('file1');
        f.addEventListener('change', evt => {
          const input = evt.target;
          for (let i = 0; i < input.files.length; i++) {
            console.log(input.files[i]);
          }
        });
      });
    </script>
  </head>
  <body>
    <input type="file" id="file1" multiple/>
  </body>
</html>

在这种情况下，输入元素被传递给事件对象的目标属性。

从输入元素的 files 属性中获取一个 File 对象

当更改事件发生时，输入元素的 files 属性将传递一个 File 对象，该对象表示所选文件。

如果您显示文件选择屏幕一次并按下取消按钮而不选择文件，将调用更改事件处理程序，但文件属性将是一个长度为 0 的数组。

您可以将 File 对象保存在某处并稍后使用。

使用 FileReader 读取 File 对象

您可以使用 FileReader 对象来读取 File 对象的内容。通过将 File 对象传递给 FileReader 对象的读取文件的方法来开始读取。

读取文件的方法有以下几种。

readAsText()
readAsArrayBuffer()
readAsBinaryString()
readAsDataURL()

FileReader 对象读取 Blob 中的数据。File 对象也是一个 Blob，因为它是从 Blob 派生的。

当 FileReader 对象加载文件时，会调用 onload 事件。读取结果在 FileReader 对象的 result 属性中设置。

读取文本（）读取后，字符串设置在结果中，readAsArrayBuffer()读取后，结果将设置为 ArrayBuffer 对象。

现在让我们看看如何实际读取文件。

读取文件示例

读取和显示所选文件的示例

在这里，我们将制作一个行为如下的示例。

选择文件后，将显示所选文件的内容。

显示在此操作检查中使用的 HTML 文件和样式表的内容。

HTML文件如下：请另存为file1.html。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>File API 1</title>
    <script src="file1.js"></script>
    <link href="style.css" rel="external nofollow"  rel="stylesheet" />
  </head>
  <body>
    <input type="file" id="file1" />
    <pre id="pre1"></pre>
  </body>
</html>

输入元素的类型属性文件作为，作为一个ID文件 1已设置。

样式表样式.css如下。我只是稍微改变了字体并添加了背景颜色，但我没有做太多。

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

html {
    font-family: 'Roboto', sans-serif;
}

pre {
    font-family: 'Roboto mono', monospace;
    font-size: 0.9rem;
    background-color: #D6EAF8;
    padding: 10px;
}

JavaScript 文件file1.js如下。

window.addEventListener('load', () => {
  const f = document.getElementById('file1');
  f.addEventListener('change', evt => {
    let input = evt.target;
    if (input.files.length == 0) {
      console.log('No file selected');
      return;
    }
    const file = input.files[0];
    const reader = new FileReader();
    reader.onload = () => {
      const pre = document.getElementById('pre1');
      pre.innerHTML = reader.result;
    };

    reader.readAsText(file);
  });
});

在窗口对象的加载事件处理程序中，设置了该文件输入元素的更改事件处理程序。

当您进行文件选择操作时，这将调用更改事件处理程序。

一个 Event 对象被传递给事件处理程序。执行文件选择操作的输入元素被传递给事件对象的目标属性。这个输入元素文件该属性设置为选定文件对象的列表。

这次我们没有在 input 元素上设置 multiple 属性，所以只会设置一个 File 对象。

拿到File对象后，接下来就是读取文件的地方了。

const file = input.files[0];
const reader = new FileReader();
reader.onload = () => {
    const pre = document.getElementById('pre1');
    pre.innerHTML = reader.result;
};

reader.readAsText(file);

这样，预文件的内容在元素中设置。

Promise 的事件处理和使用

好吧，在上面的代码中文件阅读器对象的读取文本（）在调用方法之前负载我已经设置了一个事件处理程序。

文件阅读器还有更多可用的事件，但每次设置它们然后调用它们可能有点复杂。

所以让我们使用 Promises 来组织我们的代码。

准备一个接收File对象的函数对象，如：

const readAsTextReader = file => {
  const reader = new FileReader();

  return new Promise((resolve, reject) => {
    reader.onloadstart = ev => {
      console.log(`onloadstart: total=${ev.loaded}/${ev.loaded}`);
    };

    reader.onloadend = ev => {
      console.log(`onloadend: total=${ev.loaded}/${ev.loaded}`);
    };

    reader.onprogress = ev => {
      console.log(`onprogress: total=${ev.loaded}/${ev.loaded}`);
    };

    reader.onerror = () => {
      reader.abort();
      reject('Unknown error occurred during reading the file');
    };

    reader.onload = () => {
      console.log('onload');
      resolve(reader.result);
    };

    reader.readAsText(file);
  });
};

这样，读取文件时的异步处理使用 Promise 的 then 和 catch，应用如下。

window.addEventListener('load', () => {
  const f = document.getElementById('file1');
  f.addEventListener('change', evt => {
    const input = evt.target;
    if (input.files.length == 0) {
      return;
    }
    const file = input.files[0];
    console.log(file);

    readAsTextReader(file)
      .then(value => {
        const pre = document.getElementById('pre1');
        pre.innerHTML = value;
      })
      .catch(reason => {
        alert(reason);
      });
  });
});

简单的二进制文件查看器

接下来，让我们创建一个简单的二进制文件查看器作为示例，不仅可以读取文本文件，还可以读取二进制文件。

选择文件并使用 FileReader 读取文件的位置是相同的。

然而，这一次readAsArrayBuffer()读取文件。结果作为 ArrayBuffer 返回。

ArrayBuffer 是 JavaScript 中的字节字符串。有关详细信息，请参阅“使用 ArrayBuffer 处理二进制数据”。

const readAsArrayBufferReader = file => {
  const reader = new FileReader();

  return new Promise((resolve, reject) => {
    reader.onerror = () => {
      reader.abort();
      reject('Unknown error occurred during reading the file');
    };

    reader.onload = () => {
      console.log('onload');
      resolve(reader.result);
    };

    reader.readAsArrayBuffer(file);
  });
};

window.addEventListener('load', () => {
  const f = document.getElementById('file1');
  f.addEventListener('change', evt => {
    const input = evt.target;
    if (input.files.length == 0) {
      return;
    }
    let file = input.files[0];
    console.log(file);
    if (!file) {
      return;
    }
    if (file.size > 50 * 1024) {
      alert('Please select a file smaller than 50kb.');
      return;
    }

    readAsArrayBufferReader(file)
      .then(buff => {
        console.log(buff);
        let s = '';
        let a = new Uint8Array(buff);
        for (let i = 0; i * 16 < a.length; i++) {
          let line = '';
          let p = i * 16;
          let b = a.slice(p, Math.min(a.length, p + 16));
          for (const e of b) {
            let h = e
              .toString(16)
              .toUpperCase()
              .padStart(2, '0');
            line += ' ' + h;
          }
          let addr = p
            .toString(16)
            .toUpperCase()
            .padStart(8, '0');
          line = `${addr}:${line}\n`;
          s += line;
        }
        let pre = document.getElementById('pre1');
        pre.innerHTML = s;
      })
      .catch(reason => {
        alert(reason);
      });
  });
});

这次文件大小限制为 50KB。

从读取为 ArrayBuffer 的数据创建一个 Uint8Array 对象。从那里片（）格式化为以 16 字节为增量显示。

到目前为止，我们已经介绍了如何在 JavaScript 中使用 File 对象和 FileReader 读取文件，如何使用 Promise 简化异步处理，以及处理二进制数据的示例。

到此这篇关于如何使用 JavaScript 读取文件的文章就介绍到这了,更多相关js读取文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JavaScript通过filereader接口读取文件

使用FileReader接口的readAsDataURL方法实现图片的预览. 源代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>通过filereader接口读取文件</title> <script type="text/javascript"
教你如何使用 JavaScript 读取文件

目录使用 JavaScript 读取文件概述选择带有输入元素的文件处理输入元素的变化事件从输入元素的 files 属性中获取一个 File 对象使用 FileReader 读取 File 对象读取文件示例读取和显示所选文件的示例 Promise 的事件处理和使用简单的二进制文件查看器您可以使用 JavaScript File API 加载选定文件的内容.本节介绍 File API 的基本用法. 现在让我们看看如何使用 File API. 使用 JavaScript 读取文件概述
教你如何通过JavaScript读取元素的样式

目录一.getComputedStyle() 1.getComputedStyle()是window的方法,可以获取元素当前的样式 2.两个参数 3.代码实例 4.浏览器效果二.定义一个方法获取元素信息 1.代码实例 2.浏览器显示三.clientWidth和clientHeight 1.这两个元素是获取元素的宽度和高度,不带px 2.这两个元素是只读的,不可修改 3.代码实例 4.浏览器展示四.offsetWidth和offsetHeight 1.获取元素的整个的宽度和高度,包括内容区
JavaScript操作文件_动力节点Java学院整理

在HTML表单中,可以上传文件的唯一控件就是<input type="file">. 注意:当一个表单包含<input type="file">时,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才能正确编码并以multipart/form-data格式发送表单的数据. 出于安全考虑,浏览器只允许用户点击<input type="file">来选择本地
JavaScript读取本地文件常用方法流程解析

出于安全和隐私的原因,web 应用程序不能直接访问用户设备上的文件.如果需要读取一个或多个本地文件,可以通过使用input file和FileReader来实现.在这篇文章中,我们将通过一些例子来看看它是如何工作的. 文件操作的流程获取文件由于浏览器中的 JS 无法从用户的设备访问本地文件,我们需要为用户提供一种方法来选择一个或多个文件供我们使用.这可以通过文件选择器<input type='fule' />来完成. <input type="file">
javascript读取本地文件和目录方法详解

JavaScript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼.富有朝气.但也许你还没有发现并应用它的一些更高级的功能吧?比如,对文件和文件夹进行读.写和删除,就象在VB.VC等高级语言中经常做的工作一样.怎么样,你是否需要了解这方面的知识?那就请跟我来,本文将详细描述如何使用Javascript语言进行文件操作. 一.功能实现核心:FileSystemObject 对象其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象.在详
教你用Python按顺序读取文件夹中文件

我们有时候会读取一个文件夹中的所有的文件.但是,os.listdir()返回的文件名不一定是顺序的,这就要求我们对返回的文件名列表进行排序: 这时我们想到利用Epoch后面的数字对其进行排序,具体代码如下: def file_name(path): train_loss_list = [] val_loss_list = [] loss_file_name = [] files = os.listdir(path) # 采用listdir来读取所有文件 for i in files: loss_
Java读取文件及基于正则表达式的获取电话号码功能详解

本文实例讲述了Java读取文件及基于正则表达式的获取电话号码功能.分享给大家供大家参考,具体如下: 1.正则表达式正则表达式,又称正规表示法 . 常规表示法 (英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串.在很多文本编辑器里,正则表达式通常被用来检索.替换那些符合某个模式的文本. 用到的一些特殊构造正则表达式的意义解析: ? 当该字符紧跟在任何一个其他限
JavaScript Uploadify文件上传实例

前言 java+javascript,没用上数据库,做了一个简简单单的jsp上传小功能,就是记录一下,对于这个小项目有什么建议,欢迎指出不足之处 (-_+) PS:从我的包名看得出,我用过很多前辈们的代码,基本上都是东凑西拼,各个部分代码的出处就不一一列出了,能看就行! 运行环境: Java EE + Tomcat 7.0 项目结构 ( Dynamic Web Project ) src各部分代码 1. com.bijian.study.Upload.java package com.bijia
PHP中使用Session配合Javascript实现文件上传进度条功能

Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足