基于Django/jQuery的多文件上传实现 — 第二天

2009-12-20 10:28

简介

昨天部门组织去珠海泡温泉, 晚上腐败, 玩了一天没写代码, 今天早上爬起来继续~

第二天(091220)进度

今天看了下uploadify的源码, 发现它提供了一个选项('hideButton')来不显示这个swf文件. 实验了下, 发现它实际上是将这个swf的背景设为白色, 这个元素仍然可见. 又看了看调用相关swf文件的代码, 这个东东貌似是通过swfobject来调用自己写的一个swf文件. 罢了罢了, 想要实现我先前的隐藏swf的设想似乎是不太靠谱的, 退而求其次吧. 把这个东西的背景设成白色, 然后放一个z-index比较低的按钮在那儿吧, 这样用户看似点击了按钮, 实则点击了这个swf, 希望这样风格能够统一点. 至于背景色不是白色的情形我们到时候再单独处理吧.

上述思路的实现: 首先在jQueryUI中创建一个按钮出来, 这部分代码很简单. 我们要使用uploadify, 需要在HTML中加入一个file input. 此时, 我们在file input后添加按钮即可:

<input type="file" id="upload-form-file-input" />
<span id="upload-form-file-button" class="ui-state-default ui-corner-all">上传文件</span>

添加完后发现边框和字之间没有空间, 于是给按钮的文字添加了一点空间:

#upload-form-file-button {padding: 5px;}

这样页面上应该有两个按钮, 一个是uploadify的swf按钮, 一个是我们刚创建的jQueryUI的按钮. 我们接下来需要将两个按钮重叠起来, 隐藏前一个, 并将后一个按钮的z-index调低. 我们首先通过uploadify的width和height参数将两个按钮调整到一样大. 我在Firefox 3.6中将宽度设为75, 高度设为30后, 两个按钮大小一样. 接下来要隐藏前一个按钮. 我们首先将jQueryUI的按钮放到swf的下面, 这个通过绝对定位和z-index实现:

#upload-form-file-button {margin-left: -75px; position: absolute; z-index: -1;}

这样, 后一个按钮和前一个按钮就基本完全重叠了. 不过现在的问题是swf的按钮挡住了jQueryUI的按钮. 我们还要做点点设置. 在uploadify中将hideButton设为true, 再将wmode设为透明(transparent)就可以了. 这两个选项, 前一个我的理解是设置背景色为白色, 设置完后swf的按钮消失变成了白色; 后一个是将swf元素设为透明, 这样如果swf元素和其他元素重叠, 则显示后一个元素. 这样, 我们的要求就基本实现了. 简单拿我的IE8在IE里面测试了下, 发现除了jQuery按钮的圆角效果没有出来外, 显示效果和选择效果和Firefox下一致. Firefox下的效果图:

好吧, 现在还残留了一个小问题, 鼠标悬停时jQueryUI的按钮没有应该有的动画效果, 手工添加hover函数, 甚至在uploadify里面添加hover函数貌似都没成功. 这个等有时间再解决吧~