/ 昌里大金猪的空间 / html5 文件拖放的一个简单实例

html5 文件拖放的一个简单实例

2011-06-09 posted in [html5]


人人网最近推出了一个快捷上传相片功能:
html5浏览器文件拖放的一个简单实例 - nomospace(昌里大金猪) - Nomospace

这种直接拖放相片至浏览器的作法让传统的表单或者flash上传黯然失色,用户体验比较好。根据sofish的博文提升用户体验:HTML5 拖放文件上传以及小展HTML5中File对象初探一文的指导,自己也写了一个demo。实现原理上述两位已经作了很好的总结,在此没有必要赘述。demo核心是html5 FileReader以及拖放Drag and Drop,具体逻辑见我的源代码@github

demo在fx4/chrome11中的效果图:
html5文件拖放的一个简单实例 - nomospace(昌里大金猪) - Nomospace
 
编码过程中遇到了一个问题:chrome11下的FileReader没有很好地实现EventTarget,于是当使用addEventListener时会抛出Object #<FileReader> has no method 'addEventListener',见Issue 48367。fx4下却没有这个问题,目前的解决方案看似只能通过(new FileReader()).on事件名来实现了,最后附上File API的Event Handler Attributes

注:本文示例代码仅完全适用于 Firefox 3.6+ ,部分适用于其他支持 HTML 5 接口的浏览器,完全不适用于 IE8 及以下版本 。

参考资料:
提升用户体验:HTML5 拖放文件上传
W3C File API
HTML5中File对象初探
W3C Drag and drop
MDC File
给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程)