html5多文件上传预览及进度条 思路

本文只考虑html5环境。因为本人的编程信条是，一切都要尽可能的简单。因此面对老旧的html4我是持摒弃态度。

html5的file控件支持multiple属性，但是可惜它的功能实在太有限了，它的multiple的意思是在同一次选择文件对话框中，可以多选文件，而不是通过可以打开多个文件选择对话框来选择多个文件。这样导致如果要多文件的话，必须这些文件在同一个文件夹下才能被多选上。因此这个multiple属性不靠谱。

关于文件上传进度条，使用XMLHttpRequest对象来上传文件并提供上传过程信息给浏览器客户端。

综合以上的条件限制，解决思路就产生了：

首先文件必须先于表单提交，而不是与表单同步。否则不仅用户体验很差，而且前端实现起来也非常麻烦（因为这样每选择一个文件，就需要再动态生成一个隐藏的新file控件）。

每当用户点击file控件时，使用change事件监测用户选择文件行为。在该事件中，将文件立刻进行ajax上传。这些文件存在于临时文件表中(我用数据库存文件，原因就是因为简单)，上传成功后会返回该文件的主键到页面中，以便作为表单提交时文件参数。

至于预览，在html5中就太容易了，因为html5有个文件读取api，直接从用户磁盘上读取所选取的文件。而且通过判断文件的类型，如果是图片的话，就可以将它转成base64 URL型图片，直接显示在页面上。

当在表单中删除已选择的文件时，直接从页面表单提交参数中删除对应的主键即可，无需再从数据库中删除。因为我的临时文件表会定期清除过期文件。