之前我们操作本地文件都是使用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. (备忘)android模拟器摄像头模拟

    Camera分Front Camera和Back Camera 通常我们模拟后摄像头就可以了 三个选项 none:表示没有摄像头,打开摄像应用会崩溃 emulated:系统模拟一个动态的画面--在黑白 ...

  2. oracle 存储过程中调用存储过程

    create procedure sp_name() begin ……… end 比如: create procedure pro_showdbs() show datebase; end //用ex ...

  3. 获取编辑框字符串,传入Intent

    private EditText etData; etData = (EditText) findViewById(R.id.etData); Intent i = new Intent(MainAc ...

  4. C# 毕业证书打印《二》

    当证书的打印功能得以实现,最关键的功能便是数据. 通过对打印的了解,打印中最关键的功能便是打印事件中的方法. private void pd_PrintPage(object sender, Prin ...

  5. STL---list(列表)

    Lists将元素按顺序储存在链表中. 与 向量(vectors)相比, 它允许快速的插入和删除,但是随机访问却比较慢. list的类模板声明为 template<class T, class A ...

  6. rsa加密解密

    2016年3月17日 17:21:08 星期四 现在越来越懒了.... 参考: http://www.xuebuyuan.com/1399981.html 左边是加密流程, 右边是解密流程 呃...有 ...

  7. Java for LeetCode 206 Reverse Linked List

    Reverse a singly linked list. 解题思路: 用Stack实现,JAVA实现如下: public ListNode reverseList(ListNode head) { ...

  8. 1. EasyUI 学习总结(一)——对话框dialog

    文章参考来源:http://www.cnblogs.com/xdp-gacl/p/4075079.html 感谢博主的分享,写得非常精细,我在这边给看过的做一个记录. 一.EasyUI下载 使用eas ...

  9. HDU 4966 GGS-DDU(最小树形图)

    n个技能,每个技能有0-a[i]的等级,m个课程,每个课程需要前置技能c[i]至少达到lv1[i]等级,效果是技能d[i]达到lv2[i]等级,花费w[i]. 输出最小花费使得全技能满级(初始全技能0 ...

  10. codeforces 518B. Tanya and Postcard 解题报告

    题目链接:http://codeforces.com/problemset/problem/518/B 题目意思:给出字符串 s 和 t,如果 t 中有跟 s 完全相同的字母,数量等于或者多过 s,就 ...