FileReader 对象

FileReader 实例中有四个方法来读取文件数据

1、readAsBinaryString(Blob|File)

2、readAsDataURL(Blob|File)

3、readAsText(Blob|File)

4、readAsArrayBuffer(Blob|File)

FileReader 实例包含很多事件(onerror, onprogress, onload[result])

<input name="file" id="uploadFile" />
var file = document.getElementById("uploadFile");
var bufferSize = 1024;
var pos = 0;

var onload = function(e) {
     console.log("Read", e.target.result);
     var img = document.createElement("img");
     img.src = e.target.result;
     img.width = 300;
     img.height = 300;
     document.body.appendChild(img);
};

var onerror = function() {}

var onprogress = function(e) {}

file.onchange = function() {
     if (file.files) file = file.files[0];
     while (pos < file.size) {
        var reader = new FileReader();
        reader.onload = onload;
        reader.onerror = onerror;
        /*reader.readAsText(file.slice(pos, bufferSize));
        pos += bufferSize; */

        reader.readAsDataURL(file);
        pos = file.size + 1;
     }

}
时间: 2024-10-18 11:25:30

FileReader 对象的相关文章

转载:使用FileReader对象的readAsDataURL方法来读取图像文件

文章转载自:http://blog.okbase.net/jquery2000/archive/1296.html: FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使

JavaScript 中的FileReader对象(实现上传图片预览)

1.FileReader对象简介 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } else { alert("Not supported by your browser!"); } 调用FileReader对象的方法 FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取.下面的表格列出了这些方法以及他们的

使用FileReader对象的readAsDataURL方法来读取图像文件

使用FileReader对象的readAsDataURL方法来读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用.您的图像文件不能够超过浏览器限定的大小

HTML5 FileReader对象

4个主要方法: abort():中断读取. readAsBinaryString():将文件读取为二进制码. readAsDataURL():将文件读取为DataURL. readAsText():将文件读取为文本. 事件: onabort:中断时 onerror:错误时 onload:读取成功 onloadend:读取完成不管失败还是成功 onloadstart:读取开始 onprogress:读取中 2个属性: result:只有读取成功后才有值,否者为空. readyState: 0:为读

HTML5 FileReader读取Blob对象API详解

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自由拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果. 创建FileReader对象, var reader = new F

使用FileReader接口读取文件内容

如果想要读取或浏览文件,则需要通过FileReader接口,该接口不仅可以读取图片文件,还可以读取文本或二进制文件,同时,根据该接口提供的事件与方法,可以动态侦察文件读取时的详细状态,接下来,我们详细介绍FileReader接口的使用方法. FileReader 接口 FileReader 接口提供了一个异步的API,通过这个API可以从浏览器主线程中异步访问文件系统中的数据,基于此原因,FileReader 接口可以读取文件中的数据,并将读取的数据放入内存中. 当访问不同文件时,必须重新调用F

HTML5 fileReader 随堂笔记

检查浏览器是否支持 1 if(window.FileReader) { 2 } else { 3 alert("您的浏览器不支持上传预览"); 4 } 简单方法 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>fileReader上传文件</title> 7 </head> 8 9 <

[转] HTML5之FileReader的使用

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 [javascript] view plain copy if(window.FileReader) { var fr = new FileReader(); // add your code

HTML5之FileReader的使用

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 [javascript] view plain copy if(window.FileReader) { var fr = new FileReader(); // add your code