文件上传组件WebUploader基本使用-木庄网络博客

本文摘自PHP中文网，作者Guanhui，侵删。

一、缘起

公司网站社区有图片上传功能，由于网站已经有些年头了，当时上传的时候根据客户端支不支持flash而分为两种逻辑。如果支持flash就使用SWFuploader这个上传组件进行文件上传，这种用户体验较好。如果不支持flash则使用普通的input标签进行上传，这种方式功能就不全，体验不好。但是由于现在chrome浏览器默认不支持flash，导致大部分时候用户都使用input标签上传，上传体验不好，所以决定使用百度的webuploader上传组件来替换原有的上传组件。在替换过程中发现一些问题，把需要注意的地方记录下来。

二、WebUploader使用注意

其实第三方的js插件一般用法都差不多，基本都是导入资源文件、根据配置初始化插件对象、使用对象的方法或者监听事件完成特定的功能，webuploader也差不多。

JS导入资源文件

<link href="../JS/webuploader/webuploader.css" rel="stylesheet" />
<script src="../JS/webuploader/jquery-1.12.4.min.js"></script>
<script src="../JS/webuploader/webuploader.js"></script>

需要导入wepuploader的css文件、jquery.js以及webuploader.js文件。

css文件就是webuploader帮你生成的上传按钮的样式文件，如果你对默认的样式不满意，一是可以自行修改该css来达到你的要求。另一种方法就是准备好自己的css文件，然后修改webuploader.js的源代码，然后指定按钮的class、mouseenter、mouseleave时的class等。webuploader.js代码位置如下：

button.addClass('webuploader-pick');
                //button.addClass('btn');
                //button.addClass('btn-default');
     
                me.on( 'all', function( type ) {
                    var files;
     
                    switch ( type ) {
                        case 'mouseenter':
                            button.addClass('webuploader-pick-hover');
                            break;
     
                        case 'mouseleave':
                            button.removeClass('webuploader-pick-hover');
                            break;
     
                        case 'change':
                            files = me.exec('getFiles');
                            me.trigger( 'select', $.map( files, function( file ) {
                                file = new File( me.getRuid(), file );
     
                                // 记录来源。
                                file._refer = opts.container;
                                return file;
                            }), opts.container );
                            break;
                    }
                })

由于webuploader是基于jquery的，所以需要导入jquery.js,并且jquery版本要大于1.10。坑爹的是由于网站老旧，所以之前使用的是prototype.js来进行各种操作。为了将$使用权交给prototype，还要jQuery.noConflict()，当然一般不需要这个操作啦。

这里我使用的webuploader.js的版本是0.1.2,之前我曾使用0.1.5 。但是0.1.5在进行flash上传时，如果服务器端返回的不是一个json格式的字符串，webuploader.js代码将会报错,客户端接收不到返回信息。而我们服务器返回的就是一个普通字符串，所以没有办法，只能使用0.1.2。

初始化webuploader对象

在初始化对象之前,因为上传按钮是webuploader自己帮你生成的，所以首先准备上传按钮的父标签，webuploader将在该标签内生成上传标签，可以是div、span等等。我使用的就是span：

1	`<span` `id="uploadImage"></span>`

然后就可以初始化webuploader对象了，js代码如下：

var uploader = WebUploader.create({
    //是否允许重复的图片
    duplicate: true,
    auto: false, // 选完文件后，是否自动上传
    swf: '../JS/webuploader/Uploader.swf', // swf文件路径
    server: "/upload.html", // 文件接收服务端
    pick: { id: "#uploadImage", innerHTML: "本地上传图片" }, // 选择文件的按钮。可选
    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },
    //线程数
    threads: 1,
    //单个文件大小限制
    fileSingleSizeLimit: 2000,
    //上传文件数量限制
    fileNumLimit:10,
    //上传前不压缩
    compress:false,
});