转载自网络
好几个月以前,当我在追逐互联网上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描述语句定位指定的元素位置。
你会发现当一个文件被选中时,文件输入框都会被文件名称覆盖。点击文件名就可以选择其他不同的文件。
分享到:
相关推荐
jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ text-align: left; } .ui-timepicker-div dl dt{ height: 25px; } .ui-...
jquery插件jquery-ui-1.8.18.custom.min.js
<script type="text/javascript" src="${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"> <script type="text/javascript" src="${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"> <script type="text/...
jquery-migrate-1.2.1.js文件,处理jQuery和jqprint插件的版本不兼容问题
最新版jquery-1.6.4-vsdoc.js jQuery的VS智能提示插。压缩包内包含jquery-1.6.4.js jquery-1.6.4.min.js jquery-...2、切记:两个文件的文件名不能修改,并且只要引用jquery-1.6.4.js而不要引用jquery-1.6.4-vsdoc.js。
JavaScript/CSS/DOM基础 第0课 - 内容概述 - [精通JavaScript+jQuery] 第1课 - JavaScript背景知识-[精通JavaScript+jQuery] 第2课 - JavaScript基础 - [精通...第15课 - jQuery插件 - [精通JavaScript+jQuery]
jquery-migrate-1.2.1.min.js 在网上下载一些 js 插件使用的... 在不改变你网站代码的同时,要使用 1.9 之后的版本, 所以 jquery-migrate-1.1.0.js 就是一个过渡插件 让你在原来代码上升级jquery 不用修改代码用的。
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
jquery datepicker 的中文包 调用方法 <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-...
jQuery入门级---经典课程,详细讲述了jQuery的编写,适合零基础初学者,更适合培训没学明白的学生
jquery插件jquery-ui-1.8.2.custom.min.js
jQuery入门篇-主要介绍了jQuery的一些基本功能,和使用方法,马上会上传他的核心代码!
jQuery入门汇总---无私奉献!希望对你有帮助
jQuery-photoClip-master 图片商城剪切,jq,js web开发
jquery.editable-select插件
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
jquery-ui-1.7.3.custom 完整开发包
jquery-ui-1.9.2.custom.min.js
jquery-1.11.0 + jquery-UI-1.10.4
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...