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这两块内容。

      一、Drag&Drop事件

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

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

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

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

      二、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保存着读取的值，我们就是需要这个值。

      三、JS代码实例  

      四、注意事项

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

      五、可以完善的一些方向

      1、HTML5本地存储。我们把桌面拖动来的文件，用localStorage进行本地存储，这样下次打开页面，可以继续照片的展示；
      2、支持其他页面图片拖拽；
      3、其他；
     

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