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 background属性调整增强介绍
Dec 18 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
php 高效率写法 推荐
2010/02/21 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
JS canvas实现画板和签字板功能
2021/02/23 Javascript
python模块之re正则表达式详解
2017/02/03 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python chardet库识别编码原理解析
2020/02/18 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
新员工入职感言
2014/02/01 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
学校教师安全责任书
2014/07/23 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
工作检讨书范文
2015/01/23 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电