HTML5 实现一个访问本地文件的实例


Posted in HTML / CSS onDecember 13, 2012

在前面的几篇文章里,我向大家共享了几个HTML5的例子,分别是拖拽功能演示,页面内容可编辑化演示 和 本地存储功能演示。 今天,我将向大家分享一个简单的应用,用来演示使用FileReader的方法, FileReader是HTML5里提供的一个文件操作API。

当你在看我前面所写的HTML 5例子时,我正在思考创建一个简单但又适用的例子、以一种更新奇的方式来演练这些HTML5新特性。我的目标并不是想单纯的展示这些HTML 5 API,而是想用例子来告诉开发人员如何真正的以一种实用的和创新的方式实现这些API。

在HTML5里,从Web网页上访问本地文件系统变的十分的简单,那就是使用File API。这个File规范说明里提供了一个API来表现Web应用里的文件对象,你可以通过编程来选择它们,访问它们的信息。这个File API包括:
一个FileList序列,代表着由本地系统里选中的单个的文件组成的数组。用来选择文件的用户接口可以通过<input type=”file”>调用实现。
一个Blob接口,它代表原始二进制数据,通过Blob对象你可以访问里面的字节数据。
一个File接口,它里面存有文件的只读属性信息,像文件名,文件类型,文件数据访问的地址。
一个FileReader接口,它提供了读取一个文件的方法,和一个获取文件读取结果的事件模型。
一个FileError接口和一个FileException对象,它们用来定义这个规范中的错误产生条件。
如何使用这个例子:在这个例子中,我给出了一个画板,你可以从本地文件系统里拖拽进去一个图片,或者你也可以用文件选择框来选择图片。例子中,请只选择图片文件,我并没有添加文件过滤和文件类型检查。请记住,没有一个浏览器完全实现了HTML5,这个例子需要在支持HTML5的浏览器上运行,比如Firefox3.5以上。 

实现File API的主要方法非常的简单,就像下面

复制代码
代码如下:

function imagesSelected(myFiles) {
for (var i = 0, f; f = myFiles[i]; i++) {
var imageReader = new FileReader();
imageReader.onload = (function(aFile) {
return function(e) {
var span = document.createElement(‘span‘);
span.innerHTML = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join(”);
document.getElementById(‘thumbs’).insertBefore(span, null);
};
})(f);
imageReader.readAsDataURL(f);
}
}
function dropIt(e) {
imagesSelected(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}

我选择在<td>上放置我的ondrop事件:
复制代码
代码如下:

<td align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”>
<output id=”thumbs”></output>
</td>

这个例子中,我只是拖拽本地文件到画板里。然而我想它能向你表明File API的简单但强大的能力
HTML / CSS 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 #HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 #HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 #HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 #HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 #HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 #HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 #HTML / CSS
You might like
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
js继承的实现代码
2010/08/05 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
layui导航栏实现代码
2017/05/19 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
Python 中pandas.read_excel详细介绍
2017/06/23 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
上课玩手机检讨书
2014/02/08 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
如何写求职信
2014/05/24 职场文书
灵山大佛导游词
2015/02/04 职场文书
综合测评个人总结
2015/03/03 职场文书
小学英语教学反思范文
2016/02/15 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL