HTML5多文件上传

文章转载自：http://xiechengxiong.com/288.html

一个简单的HTML5多文件上传demo。

以前我们上传文件的时候，如果通过js上传，我们无法在本地直接预览图片，还得跑到服务器回来之后再预览，而且没办法监控进度。

尽管通过flash能够实现本地预览了，而且也能监控进度了，但是始终两个不同的技术平台，相互之间衔接也太麻烦了。

HTML5的最新File API于是就带给了我们很多有趣的东西，带来了全新的文件上传体验。

1、多文件

只要的file表单input上加上 multiple=”multiple”（注意：只加multiple也行，但是符合XHTML最佳）属性，就能一次性选择多个本地文件到表单缓冲区了。

2、本地预览

通过FileReader对象，我们可以构造一个文件特殊编码器，将文件以特殊的形式进行读取，如果是图片，这种编码放到img标签的src属性中就能直接显示图片了，而且还不会发生请求。

3、异步上传

借鉴于ajax的异步机制，通过FormData对象，可以将file表单的值进行编码后发到后台服务器，后台服务器对接受到的数据以传统文件方式进行处理，然后以ajax的方式进行返回。

4、进度监控

上传文件的时候，可以通过事件机制随时监控文件上传的进度，这其中最重要的属于progress和load事件。progress是指实时进度发生 事件，它每隔一段时间就发生一次，报告单个文件的以上传体积。load事件是指文件上传完成并成功返回，用这个事件我们可以判断多文件上传时的总体进度以 及上传完成的时机。

想了解更多File API的知识，可以到这里去看看：http://www.w3.org/TR/FileAPI/

demos地址：http://xiechengxiong.com/xui/demos/multifile/