Javascript FileReader详解

发布时间：2023-05-20

一、FileReader的基础知识

FileReader是一个可以读取文件内容的JavaScript对象，它是通过异步操作的方式在浏览器中读取本地文件内容。FileReader对象可以读取文件本身或者从File API或者HTML5拖放API传递的文件。在这里，我们将会按照FileReader的基础知识、功能及简单使用、常见应用等几个方面来详细讲解。 为便于演示，我们假设我们有一个HTML页面包含一个<input type="file" id="fileInput"/>元素，你可以通过它来选择你所要读取的文件。

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e){
    //在这里可以执行相关操作
},false);

二、FileReader的主要功能及使用

通过FileReader可以实现的主要功能有：

  • 读取文件本身
  • 读取文件的内容
  • 将文件的内容转化为二进制数组或者base64编码字符串
  • 监听文件读取进程 下面我们按照这几个方面来详细讲解一下。

1、读取文件本身

var file = fileInput.files[0]; //通过input元素指定文件
console.log(file.name); //"test.txt"，文件的名字
console.log(file.size); //6，文件的大小，单位为字节
console.log(file.type); //"text/plain"，文件类型

2、读取文件的内容

var reader = new FileReader();
reader.readAsText(file); //读取文件内容
reader.onload = function(){
    console.log(reader.result); //"Hello"，文件内容
};

3、将文件的内容转化为二进制数组或者base64编码字符串

//转化为二进制数组
reader.readAsArrayBuffer(file);
reader.onload = function(){
    var arrayBuffer = reader.result;
};
//转化为base64编码字符串
reader.readAsDataURL(file);
reader.onload = function(){
    var base64 = reader.result;
};

4、监听文件读取进程

reader.onprogress = function(e){
    if(e.lengthComputable){
        var percent = (e.loaded / e.total) * 100;
        console.log(percent + '%'); //打印读取进程百分比
    }
};
reader.onloadend = function(){
    console.log('读取完成'); //文件读取完成后的操作
};
reader.onerror = function(){
    console.log('读取失败'); //文件读取错误的操作
};

三、常见应用

在实际应用中，FileReader可以很方便地实现以下几个功能：

1、在页面中预览图片

var file = fileInput.files[0]; //获取选择的文件
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
    var img = document.createElement('img');
    img.src = reader.result;
    document.body.appendChild(img); //添加预览图片到页面
};

2、在页面中预览视频

var file = fileInput.files[0]; //获取选择的文件
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
    var video = document.createElement('video');
    video.src = reader.result;
    document.body.appendChild(video); //添加预览视频到页面
};

3、上传文件到服务器

var file = fileInput.files[0]; //获取选择的文件
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function(){
    var xhr = new XMLHttpRequest();
    var url = '/upload'; //上传地址
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'multipart/form-data');
    xhr.send(reader.result); //将二进制数据上传到服务器
};

四、总结

通过本文的介绍，可以看到JavaScript的FileReader对象可以很方便地在浏览器中读取本地文件内容并进行一些基本操作。它是HTML5的新特性之一，具有很大的应用价值。在实际应用中，可以根据需求，进行定制化的开发。

推荐文章