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

2010-01-06 20:10

简介

这几天比较忙, 也比较懒. :P 元旦陪我妈在广州转悠, 回到家里累到什么都不想做. 周一上班后倒是努力了一把, 做了点美工. 主要是用PS生成了一个banner和一个favicon, 如下:

favicon.png site banner

前面那个小的是favicon.ico, 后面那个是banner, 我这儿看图片是灰底的(这应该是这个WP主题的默认美工), 实际上这是一个透明的png图片. 总体显示效果如下图:

effect

赞下华康少女字体, 嘿嘿~

今天首先研究了下如何调用Uploadify的钩子, 然后做了些简单的美工~

第四天(100106)进度

对js里面函数调用还是很不熟的, 看了下代码, 实验了下, 发现下面这种调用是可行的:

'onSelect'       : function (event, ID, fileObj){ onSelect(ID, fileObj);},

函数绑定是在uploadify实例化的时候给函数名来实现的. 具体的函数定义如下:

function onSelect(ID, fileObj){
/* What shall we do in this function?
    * 1. Hide the Upload botton.
    * 2. Show a table that would tell the user what we gonna upload.
    * 3. Fade out the table.
    *
    * Table Structure:
    * Filename     Size    Status      Cancel */
$("#upload-form-prompt").fadeOut("slow");
$("#upload-form-file-button").fadeOut("slow");
var filelis = '<tr name="' + ID + '"><td class="upload-form-filename">' + fileObj.name + '</td>';
filelis += '<td class="upload-form-size">' + humanreadablesize(fileObj.size) + '</td>';
filelis += '<td class="upload-form-status"><span class="ui-icon ui-icon-circle-arrow-n"></span></td>';
filelis += '<td class="upload-form-cancel"><span class="ui-icon ui-icon-circle-close"></span></td></tr>';
$("#upload-form-queue").append(filelis);
}

这个函数执行的主要功能是淡出相应的元素, 然后将待上传的文件信息放入一个表格, upload-form-queue. 注意到为了风格的统一, 我使用了jQueryUI提供的图标文件. 这个部分没有找到比较系统的资料, 基本是按照jQueryUI的themeroller页面来的. 上面说到的表格, 我们在html中是这么定义的:

<table id="upload-form-queue" class="ui-corner-all ui-widget">
<tr>
<th class="upload-form-filename">文件名</th>
<th class="upload-form-size">文件大小</th>
<th class="upload-form-status">文件状态</th>
<th class="upload-form-cancel">取消</th>
</tr>
</table>

相应的样式表为:

#upload-form-queue {
display: none;
border: 1px darkgray solid;
background: #eee;
width: 700px;
text-align: center;
padding: 5px;
}
#upload-form-queue span {
display: inline-block;
}
.upload-form-filename {
width: 450px;
text-align: left;
margin-left: 100px;
}

如果你足够细心的话, 你会发现这个表格是隐藏起来的. 这个表格的显示是在onSelectOnce函数中实现的:

function onSelectOnce(data){
$("#upload-form-queue").show();
}

onSelectOnce函数对一次文件选择操作(无论你选择多少个文件)只执行一次. onSelectOnce和onSelect的执行顺序是, 首先执行若干个onSelect函数, 然后执行一个onSelectOnce函数. 这个逻辑上感觉不太合理, 例如有些操作最好是在知道文件个数的条件下才好完成. 不过我这个只用不写的人就不要多说话了...

在整个界面完成后, 上传是自动开始的, 不过目前我们先加了一个测试用的超链接, 用来触发上传操作:

<div>
<a href="javascript:$('#upload-form-file-input').uploadifyUpload();">上传</a>
</div>

此时我点击按钮, 选择要上传的文件后, 刚才隐藏的#upload-form-queue这个表格会出现, 里面有我所选择的待上传的文件:

upload-table

此时, 如果我定义OnOpen函数, 则能正确alert出待上传的文件的相关信息.