15天学会jquery
需积分: 8 89 浏览量
2013-06-13
12:32:19
上传
评论
收藏 238KB PDF 举报
15
天学会
jQuery
15 Days of jQuery(Day 11) ---
使用不苛刻的
javascript
代码实现多文件上传
好几个月以前，当我在追逐互联网上
AJAX
热潮的时候，我在
FiftyFourEleven
网站上发现了一篇使用创新的
j
avascript
代码实现当时正在困扰我的“
单文件元素实现多文件上传”的文章。
所以当我想写作《
15
天漫游
jQuery
》的时候，我第一个想到的就是用
jQuery
实现这个功能。
接触易用性狂热爱好者
几天前当我检查网站记录的时候，发现了一条遗漏的文章
trackback
。跟过去看的时候我发现我的两篇
jQuery
文章被作者引用来证明他为什么讨厌
javascript
。
根据这个人的说法，任何工具或技术如果没有将易用性放在第一位都将成为垃圾。
尽管我很不同意这位仁兄一杆子打死的态度，但他还是让我对这篇详细教程有所留意。当我在编写一个简单网
页效果的时候，我会尽量小心谨慎的处理。这样如果网站访客们决定关闭
javascript
代码执行功能的时候，他
们仍然可以正常使用网站的功能。
关于第一价值的两个教程
使用一个文件输入元素实现多文件上传，并让整个交互过程流畅舒适。
让多文件上传更加人性化，但要避免以牺牲可用性为代价。关键在于使用不苛刻的
javascript
代码制作多文
件输入区域。
演示
只有一个文件输入元素，但添加了
jQuery
和其他代码实现较为亲近用户的多文件上传功能。
演示一地址
在页面
(x)html
代码中使用了多个文件输入元素，但通过
jQuery
调整为与第一个演示类似的显示页面效果。
优点是代码是不苛刻的。。。即使关闭了
javascript
执行，用户也能上传多个文件。
演示二地址
(
这个演示有
bug
导致无法使用，作者修正了
bug
，使用这个后面链接查看演示演示二地址
(no
bug))
解释
单文件输入框
j
Query
的
$(document).ready()
函数的工作有两个：
创建一个用来显示最大允许上传文件数的
div
元素。 查找文件上传框（假设这里只有一个），然后给它附上一
个
onChange
事件。
$("input[@type=file]").change(function(){
doIt(this, fileMax);
});
doit()
函数（简单又好记，呵呵
~
）检查是否达到了最大文件数量限制，如果不是，它会隐藏当前文件输入框，
在父
div
里添加一个新的文件输入框，将输入框内的文件名使用
id
“
files_list
”作为标记，在最后添加一个
页码，1/5jquery中文指导:15天学会jquery_3 [jQuery中文社区]
2008-11-10http://wiki.jquery.org.cn/doku.php?id=jquery%E4%B8%AD%E6%96%87%E6%...
资源评论
