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

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

参考以下使用readAsDataURL读取图像文件范例：

<!DOCTYPE html>

<html xmlns = "http://www.w3.org/1999/xhtml" >

<head>

<title> </title>

<script type = "text/javascript" >

function ProcessFile( e ) {

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

if (file) {

var reader = new FileReader();

reader.onload = function ( event ) {

var txt = event.target.result;

document.getElementById("result").innerHTML = txt;

};

}

reader.readAsDataURL( file );

}

function contentLoaded () {

document.getElementById('file').addEventListener( 'change' ,

ProcessFile , false );

}

window.addEventListener( "DOMContentLoaded" , contentLoaded , false );

</script>

</head>

<body>

请选取一个图像文件: <input type = "file" id = "file" name = "file" />

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

</body>

</html>

readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。

使用Img显示图像文件

若想要将读取出来的图像文件，直接显示在网页上，您可以透过JavaScript建立一个<img>标签，再设定src属性为Data URL，再将<img>标签加入DOM之中，例如以下范例所示：

<!DOCTYPE html>

<html xmlns = "http://www.w3.org/1999/xhtml" >

<head>

<title> </title>

<script type = "text/javascript" >

function ProcessFile( e ) {

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

if ( file ) {

var reader = new FileReader();

reader.onload = function ( event ) {

var txt = event.target.result;

var img = document.createElement("img");

img.src = txt;

document.getElementById("result").appendChild( img );

};

}

reader.readAsDataURL( file );

}

function contentLoaded() {

document.getElementById('file').addEventListener( 'change' ,

ProcessFile , false );

}

window.addEventListener( "DOMContentLoaded" , contentLoaded , false );

</script>

</head>

<body>

请选取一个图像文件: <input type = "file" id = "file" name = "file" />

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

</body>

</html>

读取部分文件

有时想要读取的文件太大，想要分段进行读取；或者只想要读取文件部分的内容，这时您可以将文件切割，根据浏览器的不同，可以使用以下方法：

webkitSlice：适用于支持Webkit引擎的浏览器，如Chrome。
mozSlice：适用于Firefox。

这两个方法要传入开始的位元组索引，以及结尾的位元组索引，索引以0开始。以下程式范例以FileReader对象的readAsBinaryString方法来读取文件，只读取文件的第三个位元组读取到第六个位元组：

<!DOCTYPE html>

<html xmlns ="http://www.w3.org/1999/xhtml" >

<head>

<title> </title>

<script type = "text/javascript" >

function ProcessFile( e ) {

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

if ( file ) {

var reader = new FileReader ();

reader.onload = function ( event ) {

var txt = event.target.result;

document.getElementById( "result" ).innerHTML = txt;

};

}

if ( file.webkitSlice ) {

var blob = file.webkitSlice( 2, 4 );

} else if ( file.mozSlice ) {

var blob = file.mozSlice( 2, 4 );

}

reader.readAsBinaryString( blob );

}

function contentLoaded() {

document.getElementById( 'file' ).addEventListener( 'change' ,

ProcessFile , false );

}

window.addEventListener( "DOMContentLoaded", contentLoaded , false );

</script>

</head>

<body>

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

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

</body>

</html>

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

前端读取文件图片信息流；js读取图片不同信息流；js读取图片；前端就js读取二进制数据；前端js读取文件流使用FileReader对象的readAsDataURL方法来读取图像文件；
原文链接 FileReader来把文件读入内存,并且读取文件中的数据. readAsDataURL方法可以在浏览器主线程中异步访问文件系统,读取文件中的数据,且读取后 result 为 DataURL ...
前端FileReader对象实现图片file文件转base64
1.file转base64具体代码 // 图片file转base64方法(file文件,回调函数)fileToBase64(file, callback) {// 创建FileReader对象(不兼容 ...
FileReader的使用及其方法
FileReader的使用及其方法一次性读取一个字符 @Testpublic void filereader(){String path = "D:\\zjc.txt";File ...
h5如何上传文件二进制流_前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输...
HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...
Java对象序列化文件追加对象的问题，以及Java的读取多个对象的问题解决方法。
Java对象序列化文件追加对象的问题,以及Java的读取多个对象的问题解决方法. 参考文章: (1)Java对象序列化文件追加对象的问题,以及Java的读取多个对象的问题解决方法. (2)https: ...
FileReader对象和FormData对象
FormData对象一.概述 FormData就是表单数据,我们提交表单所用的数据,H5里新加了FormData对象,可以让我们对表单数据进行操作,甚至自己组装表单数据进行提交,而不是单纯的仅仅是页 ...
JavaScript FormData对象，FileReader对象，files属性
一.ajax与FormData的使用最近在使用ajax朝后端提交数据时,如果提交的数据都是普通键值对还好说,直接使用ajax默认的格式向后端提交即可. $('#d1').click(function ...
H5 FileReader对象
前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...
前端头像上传功能实现之base64图片/头像上传详细解析2【扩展知识FileReader对象】
将图片变成base64字符串 base64是一种数据格式就是一个字符串可以当图片来使用 // base64之将图片在前端变为base64格式 1.先获取图片 2.FileReader对象将图片进行转 ...

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

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

最新文章

热门文章