filereader php,HTML5 FileReader接口的详细介绍

1、FileReader概述

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

其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

2、FileReader接口方法方法名参数描述

readAsBinaryStringfile将文件读取为二进制码

readAsTextfile,[encoding]将文件读取为文本

readAsDataURLfile将文件读取为DataURL

readAsArrayBufferfile将文件读取为ArrayBuffer对象

abort(none)中断读取操作

3、FileReader接口事件事件描述

onabort数据读取中断时触发

onerror数据读取出错时触发

onloadstart数据读取开始时触发

onprogress数据读取中

onload数据读取成功完成时触发

onloadend数据读取完成时触发，无论成功失败

4、使用实例

Html5Test

请选择一个文件：

var file_reader_result = document.getElementById("file_reader_result");

// 检测浏览器是否支持FileReader

if (typeof FileReader == "undefined") {

file_reader_result.innerHTML = "您的浏览器不支持FileReader";

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

}

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

function readAsDataUrl(){

// 检查是否为图像文件

var f = document.getElementById("file_reader").files[0];

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

file_reader_result.innerHTML = "请上传图片文件！";

return false;

};

var reader = new FileReader();

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

reader.readAsDataURL(f);

reader.onload = function(e){

file_reader_result.innerHTML = '';

}

}

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

function readAsBinaryString(){

// 检查是否为图像文件

var f = document.getElementById("file_reader").files[0];

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

file_reader_result.innerHTML = "请上传图片文件！";

return false;

};

var reader = new FileReader();

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

reader.readAsBinaryString(f);

reader.onload = function(e){

file_reader_result.innerHTML = this.result;

}

}

// 将文件以文本形式读入页面 目前测试仅支持txt文件

function readAsText(){

// 检查是否是文本文件

var f = document.getElementById("file_reader").files[0];

if (!/text\/\w+/.test(f.type)) {

file_reader_result.innerHTML = "请上传文本文件！";

return false;

};

var reader = new FileReader();

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

reader.readAsText(f);

reader.onload = function(e){

file_reader_result.innerHTML = this.result;

}

}