之前我们操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技术，由于使用了这些技术后就很进行跨平台的处理，另外就是让我们的web应用依赖了第三方的插件，而不是很独立，不够通用。在HTML5标准中，默认提供了操作文件的API让这一切直接标准化。
在学习文件操作API之前，首先得认识几个比较重要的对象：
•FileList对象：是File对象的一个集合，在Html4标准中文件上传控件只接受一个文件，而在新标准中，只需要设置multiple，就支持多文件上传，所以从此标签中获取的files属性就是FileList对象实例。见备注
•Blob对象：指向文件的数据，其实就是一个数据块对象。有两个属性：size（数据的大小），type（MIME类型）
•File对象：继承自Blob对象，指向一个具体的文件，它还有两个属性：name（文件名), lastModifiedDate（最后修改时间)
FileReader对象：设计用来读取文件里面的数据，提供三个常用的读取文件数据的方法，另外读取文件数据使用了异步的方式，非常高效。
三个重要方法：
•void readAsBinaryString(Blob blob);//读取数据作为 二进制字符串
•void readAsText(Blob blob, optional DOMString encoding);//文本
•void readAsDataURL(Blob blob);//读取as url
•void abort();//停止读取数据
•数据读取完毕后，直接放到result属性中，并触发onload事件。所以一般在onload事件中处理当前的读取文件的结果。
FileReader对象的事件：onload;onloadstart; onprogress;onabort; onerror;onloadend;
 
<!DOCTYPE html>

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        function test() {

            var fl = document.getElementById("f").files;

            for (var i = 0; i < fl.length; i++) {

                var file = fl[i];

                var str = file.name + "--" + file.size + "--" + file.type;

                document.getElementById("d1").innerHTML += str + "<br>";

                var fr = new FileReader();

                fr.onload = function() {

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

                    img.src = this.result;

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

                };

                fr.readAsDataURL(file);

            }

        }

    </script>

</head>

<body>

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

     <input type="button" onclick="test()" value="test" />

    <div id="d1"></div>

    <div id="imgs"></div>

</body>

</html>
 

HTML5学习之文件操作（九）的更多相关文章

  1. python学习笔记:文件操作和集合（转）

    转自:http://www.nnzhp.cn/article/16/ 这篇博客来说一下python对文件的操作. 对文件的操作分三步: 1.打开文件获取文件的句柄,句柄就理解为这个文件 2.通过文件句 ...

  2. python学习总结---文件操作

    # 文件操作 ### 目录管理(os) - 示例 ```python # 执行系统命令 # 清屏 # os.system('cls') # 调出计算器 # os.system('calc') # 查看 ...

  3. erlang学习笔记(文件操作)

    参考这里和这里了解到的文件操作的模块有很多:kernel下有:file,stdlib下有:filelib,filename,file_sorter.(具体查看官方文档)

  4. Smart210学习记录-------文件操作

    一.linux文件操作(只能在linux系统上用) 创建:int creat(const char* filename, mode_t mode) filename 表示要创建的文件名,mode表示对 ...

  5. NodeJS学习之文件操作

    NodeJS -- 文件操作 Buffer(数据块) JS语言自身只有字符串数据类型,没有二进制数据类型,因此NodeJS提供了一个与String对等的全局构造函数Buffer来提供对二进制数据的操作 ...

  6. python学习day8 文件操作(深度学习)

    文件操作 (day7内容扩展) 1 文件基本操作 obj = open('路径',mode='模式',encoding='编码')obj.write()obj.read()obj.close() 2 ...

  7. python学习日记(文件操作)

    文件操作概述 计算机系统分为:操作系统,计算机硬件,应用程序. 我们用python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到应用程序要操作硬件,众所周知,应用程序 ...

  8. 初步学习pg_control文件之九

    接前文,初步学习pg_control文件之八 来看这个: pg_time_t time; /* time stamp of last pg_control update */ 当初初始化的时候,是这样 ...

  9. python 学习分享-文件操作篇

    文件操作 f_open=open('*.txt','r')#以只读的方式(r)打开*.txt文件(需要与py文件在同一目录下,如果不同目录,需写全路径) f_open.close()#关闭文件 打开文 ...

随机推荐

  1. 剑指Offer 二叉搜索树的后序遍历序列

    题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同.   思路: 后续遍历数组的尾部为根节点,前面的部分 ...

  2. python egg文件解压

    unzip 就可以了. 由于项目需要将某些版本的库打包,然后 sys.path.insert方式引用(避免升级包导致某些旧的系统崩掉). 在将egg文件打包时,发现不可用.但相关模块的__path__ ...

  3. ndk学习8: 编译动态库

    目录: 手工编译动态库 ndk-build编译动态库(Eclipse环境)   手工编译静态库 老规矩还是先手工操作,知其然并知其所以然   需要用到的核心命令: gcc -g -c -fpic -W ...

  4. 使用 PHP 7 给 Web 应用加速

    PHP 20周年了!?? PHP 首发通告,1995年6月8日 发布于 COMP.INFOSYSTEMS.WWW.AUTHORING.CGI 主题:正式宣布:个人主页工具(Personal Home ...

  5. poj 3984

    http://poj.org/problem?id=3984 题目很简单,就是简单的BFS吧,主要的难点在于坐标的问题 这个呢,可以反其道而行之,就是你从(1,1)到(5,5),你肯定走过一次 走过一 ...

  6. zookeeper部署及集群测试

    zookeeper部署及集群测试 环境 三台测试机 操作系统: centos7 ; hostname: c1 ; ip: 192.168.1.80 操作系统: centos7 ; hostname: ...

  7. （转载）linux中设备文件配置程序udev详解

    如果你使用Linux比较长时间了,那你就知道,在对待设备文件这块,Linux改变了几次策略.在Linux早期,设备文件仅仅是是一些带有适当的属性集的普通文件,它由mknod命令创建,文件存放在/dev ...

  8. Linux历史

    1.Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX标准和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件.应用程序和网络协议.它支 ...

  9. php调用c/c++的一种方式

    php调用c/c++有很多方式,最常用的是通过tcp或者http去调用,通过发送请求去调用c/c++编写的cgi/fastcgi来实现,另外php还有一种直接执行外部应用程序的方式,这种方式会影响到系 ...

  10. java web 学习 --第十一天（Java三级考试）

    第十天的学习内容:http://www.cnblogs.com/tobecrazy/p/3473954.html Servlet理论知识: 1.servlet 生成class位置 tomcat编译后生 ...