webuploader与uploadify合体的上传插件

简介这是我参考webuploader与uploadify修改的上传插件,包含两个上传项目。 第一个:根据uploadify(由swfupload改装)改装而成;第二个:在webuploader的基础上进行了集成。 主要是在配置文件、布局样式以及调用方式上作了改进,相当于独立的项目,您只需要把相关的项目目录放在根目录下就可以立即运行,不过目前我提供的只是php版本,如果大家有需要,我后期可以提供java(servlet)版本。这里是这两个项目的显示效果,样式基本一致。之前用ckfinder时在很多

这是我参考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){}
});
});
其它的就不作解释了,文件中已经有很多注释了,相信大家可以自己进行相关配置与修改,下面是页面中的显示效果图


插件初始化状态


选择图片完成后的状态


上传成功状态:

显示列表里面的图片


选择服务端图片:

搜索条件下显示图片


全屏模式下的状态


任宇的个人网站

新加评论 评论标题: