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

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----------
}