15天学会jQuery(11-15).pdfVIP

页码，1/5 15天学会jQuery 15 Days of jQuery(Day 11) 使用不苛刻的javascript代码实现多文件上传 好几个月以前，当我在追逐互联网上AJAX热潮的时候，我在 FiftyFourEleven网站上发现了一篇使用创新的 javascript代码实现当时正在困扰我的“ 单文件元素实现多文件上传”的文章。 所以当我想写作《15天漫游jQuery 》的时候，我第一个想到的就是用jQuery实现这个功能。 接触易用性狂热爱好者 几天前当我检查网站记录的时候，发现了一条遗漏的文章trackback。跟过去看的时候我发现我的两篇jQuery 文章被作者引用来证明他为什么讨厌javascript 。 根据这个人的说法，任何工具或技术如果没有将易用性放在第一位都将成为垃圾。 尽管我很不同意这位仁兄一杆子打死的态度，但他还是让我对这篇详细教程有所留意。当我在编写一个简单网 页效果的时候，我会尽量小心谨慎的处理。这样如果网站访客们决定关闭javascript代码执行功能的时候，他 们仍然可以正常使用网站的功能。 关于第一价值的两个教程 使用一个文件输入元素实现多文件上传，并让整个交互过程流畅舒适。 让多文件上传更加人性化，但要避免以牺牲可用性为代价。关键在于使用不苛刻的javascript代码制作多文 件输入区域。 演示 只有一个文件输入元素，但添加了jQuery和其他代码实现较为亲近用户的多文件上传功能。 演示一地址 在页面(x)html代码中使用了多个文件输入元素，但通过jQuery调整为与第一个演示类似的显示页面效果。 优点是代码是不苛刻的。。。即使关闭了javascript执行，用户也能上传多个文件。 ( bug bug (no 演示二地址 这个演示有 导致无法使用，作者修正了 ，使用这个后面链接查看演示演示二地址 bug)) 解释 单文件输入框 jQuery的$(document).ready() 函数的工作有两个： 创建一个用来显示最大允许上传文件数的div元素。 查找文件上传框（假设这里只有一个），然后给它附上一 个onChange事件。 $(input[@type=file]).change(function(){ doIt(this, fileMax); }); doit() ~ 函数（简单又好记，呵呵 ）检查是否达到了最大文件数量限制，如果不是，它会隐藏当前文件输入框， div id files_list 在父 里添加一个新的文件输入框，将输入框内的文件名使用 “ ”作为标记，在最后添加一个 更多电子书教程下载请登陆/ebook 本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。 页码，2/5 “删除”按钮。 在DOM树中导航，我使用jQuery 的parent()函数，然后用remove()函数移除元素。我还使用了append()和 prepend()函数分别添加文件名和新的输入框。 两个关键点 - 最大文件上传数量设定： var fileMax = 3; - 输入框必须有适当的定位措施： input type=file class=upload name=fileX[]/ id 这样弄以后输入框可疑由访问者决定添加还是删除，没有任何关于 或名称的操作。当这个窗体代码发送给服 务器端脚本的时候，相关信息就已经被存放在了一个数组中了。 多文件输入框 首先，文件允许上传的数量由页面中的文件输入框的数量决定。其次，你仍然需要通过某种方法为每个输入框 接收到的内容用一个数组存放。 input type=file