在开发 Web 应用程序时，经常需要从客户端读取文件内容。不同浏览器有不同的方式来处理文件读取，但是使用 JavaScript 代码可以实现跨浏览器的解决方案。
FileReader API
FileReader API 允许在客户端读取文件内容。该 API 是 HTML5 标准的一部分，支持现代浏览器和 IE10+。
基本用法
使用 FileReader API 的基本步骤如下：
- 创建一个 FileReader 对象。
- 调用 FileReader 对象的
readAsText()方法，将文件内容读取为文本格式。 - 监听
load事件，在事件回调函数中获取文件内容。
示例代码如下：
----- --------- - --------------------------------------------- ----- ------ - --- ------------- ------------------------------------ ------- -- - ----- ---- - ---------------------- ------------------------ --- ------------------------------- ------- -- - ----- ------- - -------------------- --------------------- ---
读取二进制文件
除了读取文本文件外，FileReader API 还支持读取二进制文件，例如图片、音频和视频等。
使用 FileReader API 读取二进制文件的基本步骤如下：
- 创建一个 FileReader 对象。
- 调用 FileReader 对象的
readAsArrayBuffer()方法，将文件内容读取为 ArrayBuffer 格式。 - 监听
load事件，在事件回调函数中获取 ArrayBuffer 格式的文件内容。 - 将 ArrayBuffer 转换为文本、Blob 或其他格式，具体方式取决于文件类型和处理要求。
示例代码如下：
----- --------- - --------------------------------------------- ----- ------ - --- ------------- ------------------------------------ ------- -- - ----- ---- - ---------------------- ------------------------------- --- ------------------------------- ------- -- - ----- ------ - -------------------- -- - ----------- --- ---- -- ----- ---- - --- -------------- - ----- ----------- --- ------------------ ---
IE 特定解决方案
在 IE10 及更早版本中，FileReader API 不可用。但是可以使用 ActiveXObject 和 FileSystemObject 对象读取客户端上的文件内容。
使用 ActiveXObject
ActiveXObject 是 IE 浏览器提供的一种对象，可以访问浏览器之外的 COM 组件，例如 FileSystemObject。
使用 ActiveXObject 读取文件内容的基本步骤如下：
- 创建一个 ActiveXObject 对象，指定组件名称为 "Scripting.FileSystemObject"。
- 调用 ActiveXObject 对象的
OpenTextFile()方法，打开文件并返回 TextStream 对象。 - 调用 TextStream 对象的
ReadAll()方法，获取文件内容。
示例代码如下：
----- -------- - ------------------ ----- --- - --- -------------------------------------------- ----- ---- - -------------------------- --- ----- ------- - --------------- --------------------- -------------
使用 FileSystemObject
FileSystemObject 是 IE 浏览器提供的一种对象，可以访问客户端文件系统。该对象需要用户授权才能使用。
使用 FileSystemObject 读取文件内容的基本步骤如下：
- 创建一个 FileSystemObject 对象。
- 调用 FileSystemObject 对象的
GetFile()方法，获取文件对象。 - 调用文件对象的
OpenAsTextStream()方法，打开文件并返回 TextStream 对象。 - 调用 TextStream 对象的
ReadAll()方法，获取文件内容。
示例代码如下：
----- -------- - ------------------ ----- --- - --- -------------------------------------------- ----- ---- - ---------------------- ----- ------ - ------------------------- ----- ------- - ----------------- --------------------- ------ - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------