怎样隐藏uploadify上传控件的按钮,然后通过其它控件的事项来触发uploadify控件的文件浏览窗口并现实文件上传功能

案例地址 http://www.wfos.net

前几天项目要用到一个上传的功能,但却是很扯淡的事,需求是要隐藏uploadify控件生成的上传按钮,然后通过页面上的其它控件的事件来激发uploadify控件的文件浏览窗口并实现上传功能.

在园子里面找了很久也去国外的网站搜索了一些居然没有找到实现的方法,后来看了一下uploadify.js和swfobject.js这二个文件试图找出些什么来但却是白费时间

沉思了一个晚上后,突然间想到一个绝好的方法于是乎半夜起来偿试一下,结果居然如我所料.接下先上一张图让大家先看一下是怎样的需求

,第一步主要的作用是用ul标签包裹着object标签,当然在这里不用ul标签也是可以,但是千万要记住一定要让这个包裹着object的标签可以浮动可以让js来动态控制其loaction的值即left和top的座标.

第二步是,设置uploadify控件的属性,这步也是非常重要，这步主要功能是将uploadify的buttonImg的属性值设置为一张1*1像素的透明gif图片这样就可以让这个上传控件实现所谓的“隐藏”功能

接下来就是最后一步,相信写到这里面有点功底的同学就知道第三步要怎么办了,没错就是用js来动态控制包裹着objecj标签的left和top的值,但是千万要记住一定要让这个元素的z-index在上层.这样你在单击控件时候其实你真正单击的还是原来的uploadify的控件而以,只是这个控件被透明化了

最后上一张图



从上图可以看出右键菜单第六项"文件上传"就是要实现的功能,从外表上看你可能会猜想他是一个li标签,其实不然,这个右键菜单是由ul和li组成的,在文件上传这一项其实是空白的,

大家之所以有看到文件上传这个功能其实是uploadify这个控件所定位在这里的.当右键菜单一打开,我就算出其left和top的值,然后在通过计算用JS来控件uploadify这个控件的left和top的值,那么每次我打开的时间这个uploadify控件便会跟随这个右键菜单的移动和移动实现的方法有三

第一步:在上传页面的最后面添加一个ul或div元素用于包裹file控件如下图



但是千万 要记住这个ul或div的元素的属性position的值一定要是:absolute;这样我就可以通过js来控制UL或DIV元素的所在位置,而且这个元素的z-index一定要比其它层 的数据要大这样当单击控件的时候uploadify才能捕获单击事件从而打开文件浏览窗口

完成第一步之后接下来就是要配置uploadify的属性在上一张图



从上张图片中画线的框框 这个buttonImg这个属性想必大家知道他是做什么的，没错就是设定uploadify控件的背景图片.在这里我们设置为一张1*1像素的并且是透明的gif图片,并且设置这个控件的大小 ,大家如果用开发人员工具查看时你会看到这个控件将会被绘制成一个透明的并且有长和宽的一个控件.

前面二步都非常重要是为第三步做铺垫的

第三步：用JS来动态控制uploadify控件的位置让其覆盖在你要想的控件的上面,当单击的时候其实你单击的是uploadif控件而非其它控件.

在这里我是这样实现的,当右键菜单被调用的时候我就计算其出现的left和top的值,然后在通过简单的计算将包裹file控件的ul或div元素的left和top的值设置好.这样就可以随心的欲了