// 使用 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();
document.createElement
创建了一个 <input>
元素,并将其类型设置为 file
,这样用户可以选择文件。change
事件会被触发。我们通过 event.target.files[0]
获取用户选择的第一个文件。FileReader
实例,并使用 readAsText
方法将文件读取为文本格式。当文件读取完成后,onload
事件会被触发,文件内容可以通过 event.target.result
获取。fileInput.click()
来触发文件选择对话框,让用户选择文件。如果你需要读取其他类型的文件(例如二进制文件或图片),可以使用 readAsDataURL
或 readAsArrayBuffer
方法。
上一篇:js 写入文件
下一篇:js 获取文件大小
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站