基于HTML5的可预览多图片Ajax上传

一、关于图片上传什么什么的
在XHTML的时代，我们使用HTML file控件上传图片一次只能上传一张。要一次上传多图，做法是借助于flash。例如swfupload.js。可惜，使用复杂的点，比如flash文件需与页面同父文件夹，JavaScript文件大小也很可观。

我之前曾翻译编辑过一篇“Ajax Upload多文件上传插件”的文章，此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传，但是，实际上，还是一次只能上传1张图片，可以多次上传而已。

HTML5是个好东东，其中之一就是支持多图片上传，而且支持ajax上传，而且支持上传之前图片的预览，而且支持图片拖拽上传，纯粹利用file控件实现，JS代码寥寥，想不让人称赞都难啊！

二、demo页面

如果您手头上的浏览器是最新的FireFox或是Chrome浏览器，您可以狠狠地点击这里：基于HTML5的多图Ajax上传demo

在demo页面中，您可以点击file控件上传多图，如下（FireFox 6截图示意，下同）：

如果有非图片文件或是图片尺寸过大，会弹出提示：

或者您可以直接将桌面上的图片拖到接受拖拽的区域处：

释放后图片就可以直接预览了（此时还未上传到服务器上）：

此时图片可提前删除，也可以直接上传，例如，我们点击上传按钮，很快的，图片上传成功啦:)！

上传后的页面地址就返回了，如下：

此时，对应的upload文件夹下面这张图片就有了：

注意：鄙人博客空间大小有限，我会定时清理该图片文件夹，so, 诸位不要把这里当做免费的图片托管场所哦~~

三、核心骨架脚本简单剖析
首先是文件上传的一个core文件，是前两个晚上慢慢吞吞整出来的。文件名是： zxxFile.js (可右键……下载)

此文件就几K，百来行代码，主要负责文件上传相关的逻辑（选择、删除之类），原生JS，因此，兼容jQuery,YUI, MooYools等。zxxFile.js其实是个小巧的骨架文件，肉体等则需要另外添加。

zxxFile.js其实就是个小小对象而已：