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 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 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
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php定时执行任务设置详解
2015/02/06 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
2015年全国爱耳日活动总结
2015/02/27 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
关于感恩的作文
2019/08/26 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS