i,unbug

Undeniable[Better:见贤思齐,闻庸自省. Unique:独立思索,志在远方. Genuine:谦逊真诚,宽以待人.]

Facebook最新的Mobile Web APP版新增的”摇一摇”功能所用到的DeviceMotionEvent事件

Posted by on Jul 18, 2012 in HTML5, JavaScript, Mobile Web App | 0 comments

Facebook在Mobile Web APP方面一直是担当榜样的大哥形像.近日出的新版在iOS上多了个“摇一摇”(Friendshake)寻找附近友邻功能。与这个功能相关的事件早在iOS4.2的时候就被mobile safari支持了,很早就听到做mobile游戏的朋友用上这个事件了,即是DeviceMotionEvent,下面我们就来讲讲这个事件:

Read More

[译]JavaScript文件操作(5)-Blob类型(二进制大对象)

Posted by on Jun 6, 2012 in HTML5 | 4 comments

到目前,本系列文章集中讲了File对象能在用户参与下对操作文件的产生的积极效果。事实上File对象是Blob的特殊类型。即大块的二进制数据,File对象的尺寸及类型等属性都继承自Blob。

大多时候, Blob 的 File是可以同时使用的。例如,可以用FileReader从Blob中读取数据,可以通过URL.createObjectURL()来创建一个URL对象。

Read More

[译]JavaScript文件操作(4)-URL对象

Posted by on Jun 5, 2012 in HTML5 | 1 comment

从这系列的以上文章中,你已经学到以传统的方式使用文件。你可以上传文件到服务器,可以从硬盘中读取文件。这些都是最普遍的操作文件的方式。然而,还有一个全新的方式让你能简化任务,就是使用 URL 对象。

何为 URL对象?

URL对象是硬盘上指向文件的URL。例如,你想在页面上显示用户系统里的一张图片,服务器不必知道对应文件,当然也不用上传它。你只需在页面中加载它即可。是的,前面的文章中提到,获取文件的引用,读取 data URI,然后赋值给一个 <img> 元素。不过细想其中多浪费:图片原本就在硬盘上,还要转换成另一个格式再用之?如果你创建一个URL对象,你可以直接赋值给 <img> 元素而后直接加载文件。

Read More

[译]JavaScript文件操作(3)- 进度事件和错误处理

Posted by on Jun 5, 2012 in HTML5 | 1 comment

浏览器通过FileReader 对象从文件中读取数据比较好理解。在上篇文章中, 你学到如何轻松的使用 FileReader 的各种格式从文件中读取数据。FileReader 在很多方面与 XMLHttpRequest 非常相似。

进度事件

进度事件虽如此普遍事实上它们是在另外的规范中提出的[1]。 这些事件是专门为展示数据的传输过程而设计的。比如使用FileReader 从服务器或者硬盘中读数据的过程。

六个进度事件如下:

  • loadstart – 表明进度开始。这是第一个触发的事件。
  • progress – 数据加载过程中不停觖发.
  • error – 数据加载失败触发.
  • abort –当调用 abort()来取消数据加载时触发 (XMLHttpRequestFileReader通用).
  • load – 全部数据成功加载完毕触发。
  • loadend – 加载结束时触发,无论是errorabort, 或者 load都触发。

上篇文章中已经提到过error 和 load,其他事件将让你能够更细粒度的控制数据传输。

Read More

[译]JavaScript文件操作(2)-FileReader

Posted by on Jun 4, 2012 in HTML5 | 0 comments

上篇文章中,我介绍了在JavaScript操作文件,重点讲了如何取得File对象。 这些对象包含的文件的元数据在上传或者拖放到浏览器中时可以获取到。有了文件当然接下来就是读取文件了。

FileReader

FileReader 功能很简单: 从文件中读取数据和保存到JS变量中。此API特意设计成跟XMLHttpRequest 一样因为都是从外部读取数据。读取过程都是异步的不会造成浏览器阻塞。

FileReader 可以返回几种格式来文件数据的格式, 而且这些格式在读取文件时是必须的。通过以下几个方法可以宣告读取完毕:

  • readAsText() – 返回文件内容的纯文本格式
  • readAsBinaryString() –返回文件内容的二进制格式 (不推荐– 推荐使用 readAsArrayBuffer())
  • readAsArrayBuffer() – 返回文件内容的 ArrayBuffer 格式(图片文件推荐使用)
  • readAsDataURL() – 返回文件内容的 data URL格式
Read More
Page 1 of 212