当前位置:Gxlcms > 前端框架 > 文件上传组件WebUploader基本使用

文件上传组件WebUploader基本使用

时间:2021-07-01 10:21:17 帮助过:77人阅读

一、缘起

公司网站社区有图片上传功能,由于网站已经有些年头了,当时上传的时候根据客户端支不支持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:

<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,
    });

WebUploader.create()方法生成webuploader对象(貌似还有其他方法生成,不过这不是重点),传入配置的对象就ok了

server属性指定文件上传的服务器地址。

pick属性指定上传按钮,id通过jquery的选择器指定哪个按钮(不一定非要是#的id选择器)

swf属性指定启用flash时到哪里加载swf文件(webuploader内部兼容flash和h5,我们不需要关注它使用哪种方式)

auto 选完文件后,是否自动上传,这里我没用自动上传,因为选完文件后我需要在UI上做一些操作,之后我会手动指定开始上传。

配置需要注意的就是以上几个属性,其它的属性还有很多,有一些已经在上面的js里面注释,另外没有囊括的可以参考WebUploader官方文档。

监听webuploader事件

进行以上配置之后你就可以在页面上看到你的上传按钮了,但是上面的其实并不是重点。灵活使用webuploader的关键是对webuploader上传图片过程中触发的一系列事件的处理,根据我们的业务要求我主要监听了以下的事件:

    //当有一批文件加载进队列时触发事件
    uploader.on("filesQueued", webFilesQueued);
    //当有一批文件加载进队列时触发事件
    //uploader.on("fileQueued", webFilesQueued);
    //单个文件开始上传
    uploader.on("uploadStart", uploadStart);
    //单个文件上传成功
    uploader.on("uploadSuccess", uploadSuccess);
    //单个文件上传过程中
    uploader.on("uploadProgress", uploadProgress);
    //所有文件上传结束
    uploader.on("uploadFinished", uploadComplete);
    //图片校验不通过时
    uploader.on("error", webFileQueueError);
    //上传出错时
    uploader.on("uploadError",webUploadError);

webuploader会将你通过文件对话框选择的图片(可以是一张,可以是多张图片)加入到一个队列中,然后将该队列中所有的文件上传(注意如果你配置的thread大于1的话webuploader是支持多线程上传的)。

filesQueued 当有一批文件加载进队列时触发的事件,此时文件还没开始上传。你可以执行一些业务逻辑,比如我就需要判断这次上传了多少张图片,然后在页面上动态生成这么多图片框。执行完业务逻辑之后我需要手动指定开始上传(因为我配置的是auto: false)执行ploader.startUpload()(如果自动上传就不需要手动执行该方法),那么此时在队列中的所有图片就开始上传了。

fileQueued 和filesQueued差不多,但是这是单个文件入队时触发的事件,一次选择多个图片时会多次触发该事件。

uploadStart 单个文件开始上传时触发的事件。

uploadProgress 单个文件上传过程中触发的事件,在回调方法内你可以接收到的上传的百分比,利用这个百分比我们可以动态的显示上传进度条。

uploadSuccess 单个文件上传成功触发的事件,在回调方法内你可以接收到服务器端返回的数据以及当前是哪个file对象上传成功,目测通过file对象可以获取到图片的缩略图对象(webuploader前端帮我们生成的),可以在UI上显示缩略图等等逻辑(根据自己的业务要求决定。。。。)。

function uploadSuccess(file, serverData) {
    doSomeThing();
}

uploadFinished 队列中所有文件上传成功时触发的事件,具体回调方法视业务逻辑决定。

error 图片在加入队列之前会进行校验,看大小、格式等等是否满足配置要求,校验不通过触发的事件,你可以在UI上弹窗提示用户

uploadError 这里图片校验通过,加入了队列,并且开始上传到服务器,如果服务器或者网络有问题导致出错触发的事件,可以提示用户上传不成功。

三、一些杂项

按照以上方法应该一般的上传问题都可以解决,不过这次替换过程中还遇到一些问题,记录如下:

上传总数量限制

在前端我们有总数量的限制,但是配置时fileNumLimit:10属性指的并不是总数量10张,而是该次对话框你选择的文件数量,如果文件对话框内你选了12张,那么webuploader也会上传10张,但是后面的两张会丢弃掉。如果想对总数量限制一种方法是修改webuploader.js的源码:

 uploader.on( 'beforeFileQueued', function( file ) {
                //实时获得上传限制的文件总数
                max = this.options.fileNumLimit;
                if ( count >= max && flag ) {
                    flag = false;
                    this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file );
                    setTimeout(function() {
                        flag = true;
                    }, 1 );
                }
                return count >= max ? false : true;
            });
    
            uploader.on( 'fileQueued', function() {
                count++;
            });
    
            uploader.on( 'fileDequeued', function() {
                count--;
            });
    
            uploader.on( 'uploadFinished', function() {
                //count = 0; 限制总数量,而不是限制一次的文件数量
            });

数量校验结束后count会清0,把这个注释掉(上面js倒数第二行被注释的代码)那么fileNumLimit就是总数量了。

还有一种方法是webuploader会记录上传成功的文件数,自己拿到这个数来进行判断就行了。

chrome浏览器不能连续选择相同图片

连续上传同一图片时在chrome浏览器上总是不触发入队的事件,刚开始以为是配置的duplicate属性是false,后来发现duplicate属性是正确的true。这是chrome的特性,选择文件对话框关闭的时候会将input标签的value属性设置为这张图片的hash值?,如果input已经有了value属性(上一张图片的),并且和这一张的相同,那么将不触发change事件,也就是不上传了。解决方法:

function uploadComplete(file) {
        //解决chrome浏览器不能连续两次上传相同图片的bug k----------
        if ($("uploadImageDiv").select("input").length > 0) {
            $("uploadImageDiv").select("input")[0].value = "";
        }
        //解决chrome浏览器不能连续两次上传相同图片的bug k----------
}

监听上传完成事件,把input标签的value设为空就行了。

推荐教程:《JS教程》

以上就是文件上传组件WebUploader基本使用的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行