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

2009-12-22 00:05

简介

今天处理昨天留下的一个显示问题. 一方面, 这样写就的按钮没有鼠标悬停等效果, 另一方面, 在单个页面状态下(没有使用jQueryUI时), 前文所述的按钮显示是正常的. 而在我编写的实际页面中, 这个单独的页面实际上是通过ajax方式调用而来并显示到一个标签页中的. 此时这个按钮确无法正常显示了.

第三天(091221)进度

前一个问题比较容易解决. 昨天我尝试了很多jQuery选择器的方法都无法选择object, 后来就放弃了. 今天换了个思路, 给这个object会出现的地方加了一个span来包裹起来, 然后选择这个span就可以了:

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

然后在jQuery里面写:

$("#upload-swf-wrapper").hover(
function(){
$("#upload-form-file-button").addClass("ui-state-hover");
},
function(){
$("#upload-form-file-button").removeClass("ui-state-hover");
}
)
.mousedown(function(){
$("#upload-form-file-button").parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
if( $("#upload-form-file-button").is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
else { $("#upload-form-file-button").addClass("ui-state-active"); }
})
.mouseup(function(){
if(! $("#upload-form-file-button").is('.fg-button-toggleable, .fg-buttonset-single .fg-button,  .fg-buttonset-multi .fg-button') ){
$("#upload-form-file-button").removeClass("ui-state-active");
}
});

相应的样式表代码为:

#upload-swf-wrapper {
height: 30px;
width: 75px;
}

虽然这不是一个完全干净的方法, 但是对于我这个不懂Flash的人来说, 我已经做到最好了. 于是我对这个hack还是很满意的.

第二个问题就更讨厌一点了, 由于这种现象在Firefox和IE8里面都能够重现, 因此应该是我的代码里面有问题. 我尝试将这个上传的表单放到html里面, 即不采用ajax方式来调用这个页面, 发现问题依旧存在, 因此我遇到的问题应该是和jQueryUI的tab效果之间的兼容性问题. 在jQueryUI的js和css文件里面搜索了下z-index, 没得到有用的结果. 那么只能老老实实尝试了...

尝试过无效的方法:

罢了罢了, 本来上传页面就需要比较大的页面空间, 那么它作为一个单独的页面发布吧. 另外, 主页里面的其他tab也不要考虑用ajax调用了, 直接放在模板里面吧.

需求

今天有时间再整理下上传页面的需求:

  1. 页面上显示一个提示和一个按钮.
  2. 点击上传按钮选择文件后, 判断文件数是否为零. 如果为零, 则页面不发生任何改变.
  3. 如果文件数不为零, 提示信息淡出, 按钮移位并改变大小, 添加取消按钮(全局), 和上传文件选择按钮并排摆放.
  4. 显示待上传的文件列表. 包括文件名, 文件大小, 文件状态(待上传/已上传/正在上传), 取消按钮(单个文件).
  5. 点击全局取消后文件列表还在, 点击单个文件取消后暂停一秒然后淡出.
  6. 暂停两秒后自动开始上传.
  7. 如果是单个文件上传, 进度条显示单个文件上传的进度(以大小为单位); 如果是多个文件上传, 则进度条显示总体上传进度(以文件数计算)
  8. 暂时不考虑文件上传完成后的逻辑