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

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

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

今天首先研究了下如何调用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这个表格会出现, 里面有我所选择的待上传的文件:

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

今天处理昨天留下的一个显示问题. 一方面, 这样写就的按钮没有鼠标悬停等效果, 另一方面, 在单个页面状态下(没有使用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, 没得到有用的结果. 那么只能老老实实尝试了…

尝试过无效的方法:

• 将Uploadify的背景图像设成透明的gif并将hideButton设为false.
• 将body的z-index设为-5.
• 将按钮的html放在swf的前面.
• 用CreateCSS方法设置

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

需求

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

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

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

第二天(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函数貌似都没成功. 这个等有时间再解决吧~

上一篇博客里面提到我想写一个电子书分享管理系统, 这个系统里面必不可少的部分是文件上传的实现. 这篇文章会写下我在实现这个功能时的想法和具体操作.

需求: 上传界面, 一开始页面上只有一个上传按钮, 点击按钮后选择一个或多个文件上传. 上传过程中不刷新页面, 显示进度条. 开始上传后, 显示界面提示让用户填写书籍相关信息. 例如书名, 作者, 出版社等等. 从文件名正则匹配拿到尽量多的信息. 匹配出来的东西显示在对应的输入框里面, 剩下未识别的内容允许用户拖动到对应的域里面去. 如果是单个文件上传, 上传完成后服务器端代码用适当的工具软件读取上传完的文件, 从里面拿到适当的信息, 也反馈到客户端, 也能够让用户拖动等等. 如果是多个文件, 则在填写文件信息的页面上提供导航功能. 如果某个文件信息填写已完成, 而文件上传尚未完成, 提示用户需要等待上传完成后才能提交文件信息. 好吧, 这个是一个很纠结的需求…

参考链接:

• jQuery插件: Uploadify

第一天(091217)进度

今天基本是在调研. 前两天找到一个ajax上传的jQuery插件, 是点击按钮后上传. 看了看这个插件的代码, 发现它的原理是点击按钮后创建一个隐藏的file input, 然后通过一个隐藏的iframe来提交文件, 这样能够在页面不刷新的情况下上传文件, 思路很是直接. 今天又看了看, 发现这个插件不能满足我的要求, 因为它肯定没有办法支持多个文件同时上传. 这个是HTML表单的限制, 单个file input里面只能放一个文件. 网上有另外一个jQuery插件来实现HTML/js的多文件上传, 思路也很直接: 创建多个file input, 除了显示一个file input以外其他全部设为隐藏. 这个js的缺点在于不能一次选定多个文件, 而且在不改源代码的情况下, 似乎没有办法让已经选定的文件立即开始上传(因为这个似乎没有做ajax上传, 好吧我没有特别认真地去看代码, 也许它的确有这个功能). 最后找到的Uploadify也许能够实现我想要的功能. 这个插件利用Flash来打开文件选择窗口, 这样我们能够在上传窗口中同时选取多个文件. 于是我打算拿这个插件来试试.

试用Uploadify: 这个插件的大小有点唬人, 最新版标称大小是600K+, 不过实际上js脚本大小只有几K, 即使包括其他的资源文件, 也是很小的一个插件. 看着demo页面的html改好了, 试验下, 发现目前有这么几个问题:

1. 按钮颜色和我用的jQueryUI的smooth主题不搭
2. 按钮的字写的是BROWSE
3. 没有选择后立即上传, 而是点击上传链接后上传
4. 上传的进度条没用jQueryUI的进度条

这几个问题都有希望能解决. 第一个和第二个实际上是对这个swf文件的不满. 有几种思路来解决这些问题: 首先想到的是改flash源文件, 这个文件在作者提供的压缩包里面有, 改的话也不算难, 拿Flash打开, 改改就行了. 不过存在的问题是不具有普适性, 不方便修改. 后来发现这个插件的配置项里面有相应的选项能够修改按钮的提示内容和背景图片, 不过这个仍然不是完美的解决方案. 我设想能够将这个swf隐藏起来, 自己创建一个按钮, 点击这个按钮时调用swf的内容来实现多个文件的选择, 这样完全不依赖这个插件的swf文件, 最好了, 不过能不能这样tweak还不知道. 明天再尝试下. 第三个问题也应该比较容易解决, 这个插件给了很多钩子, 能够很容易地自定义(写到这儿, 不由得想怒赞下这个插件!), 没有尝试过, 不过应该能够得到解决, 最后一个问题是进度条, 这个看起来也不会是太大的障碍. 明天有空再解决吧.