FileReader接口

http://www.wpf100.com/html/7/2012-09/article-279.html

FileReader接口主要用来把文件读入到内在，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。到目前为止，只有Firefox 3.6+和Google Chrome 6.0+实现了FileReader接口。有一种方法可以检查您的浏览器是否对FileReader接口提供支持，如下所示 。

    if(typeof FileReader =='undefined')

    {

        alert("您的浏览器不支持FileReader接口");

    }

    else

    {

        var reader = new FileReader(); 

    }

 

 

1、 FileReader接口的方法

FileReader接口拥有4个方法，其中3个用以读取文件，另一个用来将读取过程中断。表列出了这些方法以及它们的参数和功能。需要注意的是：无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

 

   readAsText：该方法两个参数，其中第二个参数是文本的编码方式，默认值为UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

    readAsBinaryString：这个方法将文件读取为二进制字符串，通常我们将它送到后端，后端可以通过这段字符串存储文件。

    readAsDataUrl：该方法将文件读取为一串Data Url字符串，该方法事实上是将小文件以一种特殊格式的URL地址形式直接读入页面。这里的小文件通常是指图像与html等格式的文件。

 

2、 FileReader接口的事件

除了上述方法之外，FileReader接口还包含了一套完整的事件模型，用于捕获读取文件时的状态，以下表归纳了这些事件。

 

3、 FileReader接口的使用示例

下面，我们通过代码来针对FileReader的方法进行讲解。

 

 

 

 

 

 

 

 

请选择一个文件

   

   

   

   

 

 

 

 

var result = document.getElementByIdx_x("result");

var file = document.getElementByIdx_x("file");

if(typeof FileReader == 'undefined')

{

     result.innerHTML="

抱歉，你的浏览器不支持FileReader

";

     file.setAttribute('disabled','disabled');

}

//将文件以Data URL形式读入页面

function readAsDataURL()

{

     //检查是否为图像文件

     var file = document.getElementByIdx_x("file").files[0];

     if(!/image\/\w+/.test(file.type))

     {

         alert("请确保文件是为图像类型");

     }

 

     var reader = new FileReader();

     //将文件以Data URL形式读入页面

     reader.readAsDataURL(file);

     reader.onload=function(e)

     {

         result.innerHTML='';

     }

}

//将文件以二进制形式读入页面

function readAsBinaryString()

{

     var file = document.getElementByIdx_x("file").files[0];

     var reader = new FileReader();

     //将文件以二进制形式读入页面

     reader.readAsBinaryString(file);

     reader.onload=function(e)

     {

         result.innerHTML=this.result;

     }

}

//将文件以文本形式读入页面

function readAsText()

{

     var file = document.getElementByIdx_x("file").files[0];

     var reader = new FileReader();

     //将文件以文本形式读入页面

     reader.readAsText(file);

     reader.onload=function(f)

     {

         result.innerHTML=this.result;  

     }

}