FileReader 上传并读取文件，实现前端选择文件后读取文件内容

àì夳堔傛蜴生んèń 2023-06-22 11:58 1阅读 0赞

HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

## FileReader 事件 ##

*  FileReader.onabort  
    处理abort事件。该事件在读取操作被中断时触发。
 *  FileReader.onerror  
    处理error事件。该事件在读取操作发生错误时触发。
 *  FileReader.onload  
    处理load事件。该事件在读取操作完成时触发。
 *  FileReader.onloadstart  
    处理loadstart事件。该事件在读取操作开始时触发。
 *  FileReader.onloadend  
    处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。
 *  FileReader.onprogress  
    处理progress事件。该事件在读取Blob时触发。

// 上传文件
        function uploadfile() {
            let reads = new FileReader();
            file = document.getElementById('file').files[0];
            reads.readAsText(file, 'utf-8');
            console.log(reads);
            reads.onload = function (e) {
                console.log(e.target.result)
            };
            reads.onloadstart = function(e) {
                console.log('onloadstart ---> ', e)
            }
            reads.onloadend = function(e) {
                console.log('onloadend ---> ', e)
            }
            reads.onprogress = function(e) {
                console.log('onprogress ---> ', e)
            }
        }