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 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
CSS3轻松实现圆角效果
Nov 09 HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
php smarty模版引擎中的缓存应用
2009/12/02 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
PHP实现简单登录界面
2019/10/23 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
详解小白之KMP算法及python实现
2019/04/04 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
如何表示python中的相对路径
2020/07/08 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
Java面试题汇总
2015/12/06 面试题
给面试官的感谢信
2014/02/01 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
先进学校事迹材料
2014/12/30 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
我收到了德劲DE1107
2022/04/05 无线电
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers