Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

js 读取本地文件

作者:碎花洋裙的优雅   发布日期:2025-08-14   浏览:52

// 使用 FileReader API 读取本地文件的示例代码

// 创建一个文件输入元素,用户可以通过这个元素选择文件
const fileInput = document.createElement('input');
fileInput.type = 'file';

// 监听文件选择事件
fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0]; // 获取用户选择的文件

    if (file) {
        const reader = new FileReader(); // 创建一个新的 FileReader 实例

        // 当文件读取完成时触发此事件
        reader.onload = function(event) {
            const content = event.target.result; // 文件内容
            console.log('文件内容:', content);
        };

        // 读取文件为文本格式
        reader.readAsText(file);
    }
});

// 触发文件选择对话框
fileInput.click();

解释说明:

  1. 创建文件输入元素:我们通过 document.createElement 创建了一个 <input> 元素,并将其类型设置为 file,这样用户可以选择文件。
  2. 监听文件选择事件:当用户选择了文件后,change 事件会被触发。我们通过 event.target.files[0] 获取用户选择的第一个文件。
  3. 使用 FileReader 读取文件:我们创建了一个 FileReader 实例,并使用 readAsText 方法将文件读取为文本格式。当文件读取完成后,onload 事件会被触发,文件内容可以通过 event.target.result 获取。
  4. 触发文件选择对话框:最后,我们调用 fileInput.click() 来触发文件选择对话框,让用户选择文件。

如果你需要读取其他类型的文件(例如二进制文件或图片),可以使用 readAsDataURLreadAsArrayBuffer 方法。

上一篇:js 写入文件

下一篇:js 获取文件大小

大家都在看

js 数组对象排序

js 数组删掉第一个值

js fill

js json数组

js 数组复制

js 复制数组

js 数组拷贝

js 对象转数组

js 深拷贝数组

js 点击空白区域触发事件

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站