找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2280|回复: 2

[分享] HTML5 – 一个访问本地文件的例子

[复制链接]
发表于 2013-3-28 08:18:01 | 显示全部楼层 |阅读模式 来自 中国–广东–湛江
在前面的几篇文章里,我向大家共享了几个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++){    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&Prime;>      <output id="thumbs"></output></td>


发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

发表于 2013-3-28 09:39:11 | 显示全部楼层 来自 中国–北京–北京
貌似不全啊,楼主

点评

不是全部源码...只是说重要位置吧了.呵呵  详情 回复 发表于 2013-3-28 10:19

评分

参与人数 1金币 +5 收起 理由
抢楼评分专号 + 5 很幸运,你获得了抢楼奖励!

查看全部评分

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-28 10:19:31 | 显示全部楼层 来自 中国–广东–湛江
猫性男孩 发表于 2013-3-28 09:39
貌似不全啊,楼主

不是全部源码...只是说重要位置吧了.呵呵

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-23 01:02 , Processed in 0.047113 second(s), 9 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表