在前端开发中，有时候需要使用JavaScript来访问本地文件。这种需求可能来自于上传文件、读取本地文件等场景。在本文中，将介绍如何使用JavaScript实现这些功能。
选择文件
要访问本地文件，首先需要让用户选择文件。可以通过 <input> 元素来创建一个文件选择器：
<input type="file" id="file-input">
这会创建一个用于选择文件的按钮。当用户点击按钮时，会弹出文件选择对话框。选择完文件后，可以通过JavaScript获取选中的文件：
const fileInput = document.getElementById('file-input')
fileInput.addEventListener('change', (event) => {
const selectedFile = event.target.files[0]
})以上代码中，event.target.files 是一个 FileList 对象，包含了用户选择的文件列表。我们只需要获取第一个文件即可。
读取文件
一旦获得了选中的文件，就可以开始读取它的内容了。可以使用 FileReader 对象来读取文件：
const reader = new FileReader()
reader.readAsText(selectedFile)
reader.addEventListener('load', (event) => {
const fileContents = event.target.result
})以上代码中，readAsText 方法会将文件内容读取为文本。load 事件表示文件已经读取完成，可以通过 event.target.result 获取文件内容。
示例
下面是一个完整的示例，演示了如何让用户选择文件并读取它的内容：
<input type="file" id="file-input"> <pre id="file-contents"></pre>
-- -------------------- ---- -------
----- --------- - -------------------------------------
----- ------------------- - ----------------------------------------
------------------------------------ ------- -- -
----- ------------ - ---------------------
----- ------ - --- ------------
-------------------------------
------------------------------- ------- -- -
----- ------------ - -------------------
----------------------------- - ------------
--
--总结
使用JavaScript访问本地文件需要经过用户授权，且只能访问用户指定的文件。这种功能可以用于上传文件、读取本地配置等场景。在实际使用中，需要注意保护用户隐私和安全。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9925
