webuploader与uploadify合体的上传插件

这是我参考webuploader与uploadify修改的上传插件,包含两个上传项目。

第一个:根据uploadify(由swfupload改装)改装而成;第二个:在webuploader的基础上进行了集成。

主要是在配置文件、布局样式以及调用方式上作了改进,相当于独立的项目,您只需要把相关的项目目录放在根目录下就可以立即运行,不过目前我提供的只是php版本,如果大家有需要,我后期可以提供java(servlet)版本。这里是这两个项目的显示效果,样式基本一致。之前用ckfinder时在很多不便,特别是上传完后回调都没有,它的代码又极其复杂,还不如改其它上传插件。所以这两个项目中,在完成上传后与点击文件事件中都包含了回调功能,弥补了ckfinder的缺陷,样式上也绝对是上档次的。事实上,两个项目有很多相同的地方,处理上传的方式也基本相同,后台文件基本可以互换,不过要作出说明的是,webuploader处理上传时文件名与储存的文件名是相同的,不作处理,所以有同名文件会覆盖;upload项目是会根据年/月/日生成目录,文件名也是MD5字符串,不存在覆盖。

以下是对这两个上传项目的相关说明-
webuploader插件:全屏查看 弹框查看 点击下载
1.webuploader项目只提供了上传功能,这里集成了上传、管理、搜索的功能,使用起来更加方便
2.修复了在IE低版本中session丢失的bug
3.原本在IE低版本中样式有些区别,这里样式得到了统一
4.调用方式上做了封装,对外只提供4个常用配置项,所以在对外调用上是统一的,如果有特殊需要,可以在源文件中修改
5.配置文件采用服务端配置
6.提供两种对外的页面调用方式,一种是iframe,一种是直接访问index.php
它还有一个好处就是在未上传时就能生成缩略图,非常的人性化

以下是目录结构
webuploader           –项目目录
–css               –样式目录
–images            –样式相关图片目录
–js                –js目录
–uploads           –上传后文件存储的默认目录,可以在配置文件中设置
–webuploader       –webuploader目录,自带的js与flash目录
–action.php        –处理获取文件列表与删除文件的文件
–config.php        –配置文件
–fileupload.php    –处理文件上传的文件
–frame.php         –用作iframe调用的文件
–index.html        –展示用iframe调用的文件
–index.php         –展示直接调用的文件
–preview.php       –低版本中生成预览图的文件
在上页面的文件中,调用index.html与index.php即可,其中index.php是用作直接访问的,即在浏览中中输入该地址,适合在window.open中使用;index.html在这里是作iframe演示,如果想要在某个页面以弹出框形式调用,这种文件最好不过了,把index.html页面中的css与js放在要显示的页面,特别是hidoger.fileManager.show这段内容,这个是显示弹出框调用的,如果要在某个页面要点击上传按钮显示上传框,可以这样做:
$(‘#upload’).click(function(){

hidoger.fileManager.show({

type : ‘Images’,//可填值 ‘Files’, ‘Images’, ‘Flash’

//选中一个文件时调用
callback : function(fileUrl, name, allFiles){},

//上传时需要的额外额外数据
additionalData : {domain : ‘hidoger’},

//上传完成
complete : function(file){}

});

});

upload插件:全屏查看 弹框查看 点击下载
1.uploadify功能过于简单,只有上传功能,不能单独拿出来使用,这里集成了上传、管理、搜索的功能,使用起来更加方便
2.修复了在session丢失的bug
3.样式过于简单,且在有些浏览器中存在错位,这里进行统一后,再也不用担心了
4.调用方式上做了封装,对外只提供4个常用配置项,所以在对外调用上是统一的,如果有特殊需要,可以在源文件中修改
5.配置文件采用服务端配置
6.提供两种对外的页面调用方式,一种是iframe,一种是直接访问index.php
7.未上传时会显示相应文件类型的图标

以下是目录结构
upload                  –项目目录
–css               –样式目录
–images            –样式相关图片目录
–js                –js目录
–uploads           –上传后文件存储的默认目录,可以在配置文件中设置
–action.php        –处理获取文件列表与删除文件的文件
–config.php        –配置文件
–frame.php         –用作iframe调用的文件
–index.html        –展示用iframe调用的文件
–index.php         –展示直接调用的文件
–upload.php        –处理文件上传的文件
在上页面的文件中,调用index.html与index.php即可,其中index.php是用作直接访问的,即在浏览中中输入该地址,适合在window.open中使用;index.html在这里是作iframe演示,如果想要在某个页面以弹出框形式调用,这种文件最好不过了,把index.html页面中的css与js放在要显示的页面,特别是hidoger.fileManager.show这段内容,这个是显示弹出框调用的,如果要在某个页面要点击上传按钮显示上传框,可以这样做:
$(‘#upload’).click(function(){

hidoger.fileManager.show({

type : ‘Images’,//可填值 ‘Files’, ‘Images’, ‘Flash’

//选中一个文件时调用
callback : function(fileUrl, name, allFiles){},

//上传时需要的额外额外数据
additionalData : {domain : ‘hidoger’},

//上传完成
complete : function(file){}

});

});

其它的就不作解释了,文件中已经有很多注释了,相信大家可以自己进行相关配置与修改,下面是页面中的显示效果图

插件初始化状态

选择图片完成后的状态

上传成功状态:

显示列表里面的图片

选择服务端图片:

搜索条件下显示图片

全屏模式下的状态

发表评论