在前端开发中，经常需要使用JavaScript加载本地磁盘上的文件。例如，当我们需要展示一个PDF文档或者音频文件时，我们就需要读取本地文件并将其展示出来。
但是，由于安全问题，浏览器默认情况下不允许JavaScript访问本地文件系统，因此我们需要一些特殊的方法来实现这个功能。接下来，我会介绍两种实现方法：使用input标签和使用File API。
使用input标签
第一种方法是使用input标签，通过用户手动选择要上传的文件来完成读取本地文件的操作。
具体步骤如下：
创建一个input标签，设置type为file。
------ ----------- ---------------
给input标签添加change事件监听器，在文件被选择后触发回调函数。
----- --------- - ------------------------------------- ------------------------------------ ------- -- - ----- ---- - ---------------------- -- -------- ---
在回调函数中，可以通过FileReader对象读取文件内容。
----- ------ - --- ------------- ------------- - ------- -- - ----- ----------- - -------------------- -- ---------- -- ------------------------
这种方法的优点是简单易懂，适合只需要读取本地文件的简单场景。但是由于需要手动选择文件，无法实现自动化，因此不适合大规模使用。
使用File API
第二种方法是使用File API，可以直接通过JavaScript代码读取本地文件内容，非常方便。
具体步骤如下：
创建一个input标签，并设置style.display为none，将其插入到body中。
------ ----------- -------------- --------------- -------
-------------------------------------
在JavaScript代码中，通过click事件触发input标签的点击操作，弹出文件选择对话框。
----- --------- - ------------------------------------- ------------------
在change事件回调函数中，通过FileReader对象读取文件内容。
----- ------ - --- ------------- ------------- - ------- -- - ----- ----------- - -------------------- -- ---------- -- ------------------------
这种方法的优点是可以自动化地读取本地文件内容，非常方便。但是由于需要用户手动触发点击操作，可能会影响用户体验。
综上所述，我们可以根据具体需求选择不同的方法来读取本地文件。如果只需要简单操作，可以使用第一种方法；如果需要自动化读取，可以使用第二种方法。
示例代码：
--------- -----
------
------
----- ----------------
---------------------
-------
------
------- -----------------------
-- ---------------
----- ---------- - --------------------------------
--------------- - -------
------------------------------------- ------- -- -
----- ---- - ----------------------
----- ------ - --- -------------
------------- - ------- -- -
----- ----------- - --------------------
-------------------------
--
------------------------
---
--------------------------------------
-- ------------ ---
----- ---------- - --------------------------------
--------------- - -------
------------------------ - -------
------------------------------------- ------- -- -
----- ---- - ----------------------
----- ------ - --- -------------
------------- - ------- -- -
-----
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------