文章转载自：http://blog.okbase.net/jquery2000/archive/1296.html；

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>

请注意：
不同的浏览器对于HTML 5的支持程度不同，上述程式码可在chrome正常执行，不见得可以在其它浏览器中正确的执行。

转载：使用FileReader对象的readAsDataURL方法来读取图像文件的更多相关文章

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

    使用FileReader对象的readAsDataURL方法来读取图像文件   FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项 ...

  2. FileReader对象的readAsDataURL方法来读取图像文件

     FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Dat ...

  3. ResquestInfoServlet类通过访问HttpServletRequest对象的各种方法来读取HTTP请求中的特定信息，并且把它们写入到HTML中

    ResquestInfoServlet类通过访问HttpServletRequest对象的各种方法来读取HTTP请求中的特定信息,并且把它们写入到HTML中 ResquestInfoServlet.j ...

  4. JS使用readAsDataURL读取图像文件

    JS使用readAsDataURL读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片 ...

  5. JavaScript使用readAsDataURL读取图像文件

    JavaScript使用readAsDataURL读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以 ...

  6. 使用readAsDataURL方法预览图片

    使用FileReader接口的readAsDataURL方法实现图片的预览. 在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片 ...

  7. 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。

    一.FileReader对象 用来把文件读入内存,并且读取文件中的数据.FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 浏览器支持情况, ...

  8. [HTML5] FileReader对象

    写在前面 前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileRea ...

  9. FileReader对象异步获取外部文件的内容

    1.在网页表单中,定义input的type为file,就可以打开存储在计算机上的文件. <!DOCTYPE html> <head> <meta charset=&quo ...

随机推荐

  1. java虚拟机（三）-- 虚拟机类加载机制

    1.类加载的时机:类从被加载到虚拟机内存中开始,到卸载出内存为止.包含以下几个阶段: 1.加载 2.验证 3.准备 4.解析 5.初始化 6.使用 7.卸载 2.类加载器的种类 1.启动类加载器:这个 ...

  2. 【故障处理】初始化数据时报600错误kcbz_check_objd_typ_3

    http://blog.itpub.net/519536/viewspace-661905/

  3. 大家好 这个事我的BLOG 站点 欢迎大家 訪问和公布文章技术的 和评论 交流技术使用

    地址 http://microlmj.gotoip3.com/blog/article!showAllArticleForPageTest.action ssh+mysql+java+tomcat+b ...

  4. C++中设计一个类，使其不能继承

    1.C++11中已经有了final关键字:它的作用是指定类的虚函数不能被该类的继承类覆盖(override),或者是指定一个类成为一个不能被继承的类(final class) 2.派生类用调用基类的构 ...

  5. hdu 4587 推断孤立点+割点+ 删除点之后，剩下多少连通分量

    做了非常久...... 题目链接:  http://acm.hdu.edu.cn/showproblem.php?pid=4587 先枚举删除的第一个点,第二个点就是找割点.没有割点当然也有答案 学到 ...

  6. 有用 .htaccess 使用方法大全

    这里收集的是各种有用的 .htaccess 代码片段,你能想到的使用方法差点儿全在这里. 免责声明: 尽管将这些代码片段直接复制到你的 .htaccess 文件中,绝大多数情况下都是好用的,但也有极个 ...

  7. CSS中的BFC解析

    CSS的BFC BFC 即块级格式上下文(Block Formatting Context),它是指一个独立的块级渲染区域,只有block-level的box参与,该区域拥有一套渲染规则来约束块级盒子 ...

  8. B. Case of Fake Numbers( Codeforces Round #310 (Div. 2) 简单题)

    B. Case of Fake Numbers time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  9. WCF问题集锦：ReadResponse failed: The server did not return a complete response for this request.

    今日.对代码进行单元測试时.发现方法GetAllSupplyTypes报例如以下错误: [Fiddler] ReadResponse() failed: The server did not retu ...

  10. puppet开源的软件自动化配置和部署工具——本质就是CS，服务端统一管理配置

    1.  概述 puppet是一个开源的软件自动化配置和部署工具,它使用简单且功能强大,正得到了越来越多地关注,现在很多大型IT公司均在使用puppet对集群中的软件进行管理和部署,如google利用p ...