fildReader接口的示例应用

<! DOCTYPE html >

< html lang = "en" >

< head >

< title > fileReader </ title >

< meta charset = "UTF-8" >

< meta name = "viewport" content = "width=device-width, initial-scale=1" >

< style > < / style >

</ head >

< body >

< p > fildReader接口的示例应用 </ p >

< label > 请选择一个文件: </ label >

< input type = "file" id = "file" />

< input type = "button" value = "读取图像" onclick = "readAsDataURL()" />

< input type = "button" value = "读取二进制文件" onclick = "readAsBinaString()" />

< input type = "button" value = "读取文本文件" onclick = "readAsText()" />

< div name = "result" id = "result" ></ div >

< div name = "result" id = "result1" ></ div >

< script >

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

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

if ( typeof FileReader == 'undefined' ) {

result . innerHTML = "浏览器不支持fileReader" ;

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

}

//改方法将文件读取为一串Data URL字符串

function readAsDataURL () {

// 检查是否为图像文件

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

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

console . log ( "请确保文件为图像类型" );

return false ;

}

var reader = new FileReader ();

reader . readAsDataURL (file);

reader . onload = function ( e ) {

var result = document . getElementById ( "result1" );

console . log ( this . result );

result . innerHTML = '<img src="' + this . result + '" alt=""/>' ;

}

};

// 改方法将文件读取为二进制字符串

function readAsBinaString () {

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

var reader = new FileReader ();

reader . readAsBinaryString (file);

reader . onload = function ( f ) {

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

// 在页面上显示二进制数据

result . innerHTML = this . result ;

}

};

//将文件以文本方式读取

function readAsText () {

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

var reader = new FileReader ();

reader . readAsText (file);

reader . onload = function ( f ) {

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

result . innerHTML = this . result ;

}

};

< / script >

</ body >

</ html >