Google HTML5训练营：图片旋转墙

      六月末，第一次去参加Google的HTML5训练营，估计其余同窗多少都接触过。从下午一点到晚上10点，将近9个小时的时间里，首先由杜欢、寒蕊、胡坤作了一些技术上的分享，我对Google工程师寒蕊MM的CSS 3D Transforms内容比较感兴趣，在后面选择命题的时候，选择作一个图片展现的东东，最后命名：图片旋转墙。

      咱们最后合做的成员有：韦益，方有亮，邓佑华，姜志超，乔杰，盛庆鸿，冯尚实（本身），你们都来自不一样的公司，为了一种兴趣跟爱好，来这里相聚，收获都挺多。咱们讨论技术实施方案，最后肯定用Drag&Drop实现本地图片拖拽，用File API 跟FileReader API实现文件的读取，再用寒蕊MM分享的3D Transforms进行图片旋转展现。也是根据实施方案，咱们把7我的分红3组，分别领取三块任务，由于时间较紧，因此最后的做品也比较粗糙，只是实现了基本功能。猛击这里查看效果：http://enjoyhtml5.com/hackathons/20110626/photo-gallery/index.html （用Chrome 12+打开）

      这里我只详细讲我完成的部分：Drag&Drop 以及File API 、FileReader API这两块内容。

      1、Drag&Drop事件

      dragstart：拖拽元素开始拖拽时触发，触发对象：拖拽元素；
      dragenter：拖拽元素进入目标元素时触发，触发对象：目标元素；
      dragover：拖拽元素在目标元素上移动时触发，触发对象：目标元素；
      dragleave：拖拽元素离开目标元素时触发，触发对象：目标元素；
      drop：拖拽元素放在目标元素内时触发，触发对象：目标元素；
      dragend：拖拽元素拖拽完成时触发，触发对象：拖拽元素；

     
      上图是各浏览器对Drag&Drop的支持状况。题外：竟然IE6-8都支持耶，这个仍是HTML5的东东吗？哈哈

      咱们从桌面上拖拽图片（其余文件亦可）到浏览器，其实咱们只用到了目标元素，就是说，把图片放到一个容器里，触发这个容器（拖拽目标元素）的事件，而后使用下面要提到的File API 、FileReader API，就能够把图片数据读取出来。

      为了容器（拖拽目标元素）更大一些，咱们把整个视窗做为容器，这样图片只要进入了视窗就能够操做了。
      HTML结构代码：
     
      CSS样式代码：
     
      到此，咱们把结构跟样式已经定义好了，下面咱们继续讲File API跟FileReader API，等讲完这块内容，咱们再加上JS代码部分。

      2、File 跟 FileReader

      在W3C的草案里，Javasript被容许能够获取文件的名称、大小、文件类型等信息了，而且也容许经过一些不一样的方式，得到文件的内容，部分浏览器已经开始支持这一特性，好比：Chrome，你懂得。。。

      拖拽图片（文件），咱们能够侦听容器的事件，经过事件的dataTransfer得到图片（文件）信息；dataTransfer对象的属性和方法：
      dataTransfer.effectAllowed[=value]： 返回容许的拖拽效果。该属性能够修改，可选的值：none|copy|copyLink|copyMove|link|linkMove|move|all|uninitialized；
      dataTransfer.dropEffect[=value]：返回实际的拖拽效果，若是该值与effectAllowed设置不一致，则拖拽失败。该属性能够修改，可选的值：none|copy|link|move；
      dataTransfer.types：返回在dragstart触发时存储数据的类型。若是是桌面文件拖拽，则返回files；
      dataTransfer.setData(format, data)：添加指定格式的数据；
      dataTransfer.getData(format)：返回指定格式的数据，若是数据不存在，则返回空字符串；
      dataTransfer.clearData([format])：删除指定格式（可选）的数据；若是未指定格式，则删除全部数据；
      dataTransfer.files：返回正在拖拽文件列表（fileList）；     

      再来看看FileReader API
      W3C定义：“FileReader接口是提供一些读取文件的方法和一个包含读取结构的事件模型。”

      FileReader的方法：
      abort：中断读取；
      readAsBinaryString(file)：将文件读取为二进制码；
      readAsText(file[, encoding])：将文件读取问文本，encoding为文本编码，默认UTF-8；
      readAsDataURL(file)：将文件读取为DataURL，图片文件使用这个比较合适，咱们在作的时候用到了这个方法；

      FileReader的事件：
      onabort：中断操做时触发；
      onerror：读取出错时触发；
      onload：成功读取时触发；
      onloadend：完成读取时触发，不论成功与否；
      onloadstart：开始读取时触发；
      onprogress：读取中触发；

      文件一旦开始读取，不论成功与否，实例的result属性都会填充，若是失败，则result的值为null，不然result保存着读取的值，咱们就是须要这个值。

      3、JS代码实例  

      4、注意事项

      一、浏览器兼容。咱们在这里使用了if语句进行了判断，能够检测FileReader是否支持；
      二、取消默认行为。咱们在dragover时，取消了元素的默认行为，不至于拖拽一张图片后页面重定向；

      5、能够完善的一些方向

      一、HTML5本地存储。咱们把桌面拖动来的文件，用localStorage进行本地存储，这样下次打开页面，能够继续照片的展现；
      二、支持其余页面图片拖拽；
      三、其余；
     

      好好学习，努力实现好的应用，推广最新的技术。o_o