Page 69 - JavaScript修炼之道
P. 69
58 第四部分 表单技巧
任务 26 使用动态多文件上传
HTML（在HTML5之前）里内置的文件上传功能说实话很让人沮丧。它是单文件的，没有上
①
传过程反馈，也不能对文件大小或者文件类型做过滤限制等。而且它使用Base64编码 ，也就是
说每个上传的文件都会膨胀33%。除非我们用WebSockets或者SWFUpload这种东西，否则我们基
本上无法摆脱这些限制。
然而，通过给用户提供选择多个文件的好用的操作，我们能提升一点用户体验。我在这里所
说的“好用”是指“不是有多少文件就用多少文件上传控件”。我比较喜欢37signals公司在他们
的产品 中显示待上传文件列表的方式：扁平的、图标装饰的文件名列表，还可以从这个上传“队
②
列”中移除任意项，如下图所示。
③
秘诀是，每当文件上传控件的值得到设置 ，就把这个控件复制一份，把原始体控件移到那
个“队列”中隐藏起来，并重置控件复制体的值，使其看起来还是空的。下一页的代码通过<ul>
来实现这个队列，每选择一次文件就合成一个<li>来容纳文件上传控件、文件名和移除图标。只
是感觉这么做会好一点。接下来，需要对输入进行更多控制（比如一次可以选中多个文件，做到
文件大小及类型限制），但用现在的<input type="file" >不可能做得到，要实现这些强大的
功能，还是用SWFUpload吧。
右页中最后那段JS代码用了一个小巧的映射，从而从文件扩展名得到CSS class属性名，此
外，还实现了当队列中的链接被单击时的队列项移除操作。
——————————
① 一系列用字符的ASCII码在64以下的字符串来表示二进制数据的编码方法，主要是为了保证数据在传输过程中不
会被转义。Base64把每三个8Bit的字节转换为四个6Bit的字节，然后把6Bit再添两位高位0，组成四个8Bit的字节，
所以转换后的字符串理论上将要比原来的长1/3。*
② Prototype。*
③ 也就是用那个控件选择了一个文件。*
