webuploader与uploadify合体的上传插件

最新推荐文章于 2024-07-04 16:25:34 发布

脚本之家

最新推荐文章于 2024-07-04 16:25:34 发布

阅读量2.5k

点赞数 3

分类专栏：程序人生

程序人生专栏收录该内容

207 篇文章 0 订阅

订阅专栏

这是我参考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){}

   });

});

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