jQuery入门教程-15 Days of jQuery(Day 11) --- 使用不苛刻的javascript代码实现多文件上传

转载自网络
好几个月以前，当我在追逐互联网上AJAX热潮的时候，我在 FiftyFourEleven网站上发现了一篇使用创新的javascript代码实现当时正在困扰我的“ 单文件元素实现多文件上传”的文章。

所以当我想写作《15天漫游jQuery》的时候，我第一个想到的就是用jQuery实现这个功能。

接触易用性狂热爱好者

几天前当我检查网站记录的时候，发现了一条遗漏的文章trackback。跟过去看的时候我发现我的两篇jQuery文章被作者引用来证明他为什么讨厌javascript。

根据这个人的说法，任何工具或技术如果没有将易用性放在第一位都将成为垃圾。

尽管我很不同意这位仁兄一杆子打死的态度，但他还是让我对这篇详细教程有所留意。当我在编写一个简单网页效果的时候，我会尽量小心谨慎的处理。这样如果网站访客们决定关闭javascript代码执行功能的时候，他们仍然可以正常使用网站的功能。

关于第一价值的两个教程

    使用一个文件输入元素实现多文件上传，并让整个交互过程流畅舒适。

    让多文件上传更加人性化，但要避免以牺牲可用性为代价。关键在于使用不苛刻的javascript代码制作多文件输入区域。

演示

    只有一个文件输入元素，但添加了jQuery和其他代码实现较为亲近用户的多文件上传功能。

演示一地址

    在页面(x)html代码中使用了多个文件输入元素，但通过jQuery调整为与第一个演示类似的显示页面效果。优点是代码是不苛刻的。。。即使关闭了javascript执行，用户也能上传多个文件。

演示二地址

解释

单文件输入框

jQuery的$(document).ready() 函数的工作有两个：

在文档下载量最大的时候创建一个div元素。 查找文件上传框（假设这里只有一个），然后给它附上一个onChange事件。

$("input[@type=file]").change(function(){
doIt(this, fileMax);
});

doit()函数（简单又好记，呵呵~）检查是否达到了最大文件数量限制，如果不是，它会隐藏当前文件输入框，在父div里添加一个新的文件输入框，将输入框内的文件名使用id “files_list”作为标记，在最后添加一个“删除”按钮。

在DOM树中导航，我使用jQuery的parent()函数，然后用remove()函数移除元素。我还使用了append()和prepend()函数分别添加文件名和新的输入框。

两个关键点

- 最大文件上传数量设定：

var fileMax = 3;

- 输入框必须有适当的定位措施：

<input type="file" class="upload" name="fileX[]"/>

这样弄以后输入框可疑由访问者决定添加还是删除，没有任何关于id或名称的操作。当这个窗体代码发送给服务器端脚本的时候，相关信息就已经被存放在了一个数组中了。

多文件输入框

首先，文件允许上传的数量由页面中的文件输入框的数量决定。其次，你仍然需要通过某种方法为每个输入框接收到的内容用一个数组存放。

<input type="file" class="upload" name="fileX[]"/>

第二个演示跟前面的比起来最大的不同在于，我遍历了每个文件输入框并在其内容有改动时执行doit()函数。通过遍历每一个输入框，我可以为我的代码添加有用的额外信息：输入框内容在“堆栈”中的顺序。

换句话说，当这段代码执行时，它会特别指定第一个输入框，或者第二个，抑或第三个。

代码见下：

$("input[@type=file]:nthoftype("+
n+")")

jQuery的灵活性允许我们使用CSS和XPath描述语句定位指定的元素位置。

你会发现当一个文件被选中时，文件输入框都会被文件名称覆盖。点击文件名就可以选择其他不同的文件。