WebUploader百度WebUploader简单使用

今天在做一个图片上传功能，整个应用所有的图片上传都需要压缩。唉，工作量大。就想弄个插件来压缩上传

先贴代码：

//百度WebUploader
/***
 * domId 要绑定的元素，id、class等选择器皆可,默认id为upload_file的div元素
 * size大小，要限制图片大小的M数,不传默认50M
 * isMultiple 是否可以为多选;true：多选，false：单选。不传默认多选
 * url 上传接口,传参user的话图片保存在user文件目录，不传默认/compressUploadImages.do保存在images目录下
 */
var uploader;
function initWebUploader(domId,size,isMultiple,url){
    if(!domId){
        domId="#upload_file";
    }
    if(!size){
        size=50;
    }
    if(isMultiple==null||isMultiple==''){
        isMultiple=true;
    }
    if(url=='user'){
        url="/compressUploadUser.do";
    }else {
        url="/compressUploadImages.do";
    }
    uploader = WebUploader.create({  
        auto: true,  
        swf: domain+'/js/common/Uploader.swf',  
        server:url,  
        pick:{id:domId, multiple:isMultiple}, //multiple为true为可多选图片（多张），false为单张
        duplicate:true,//允许重复再次上传
        accept: {  //上传文件的格式
            title: 'Images',  
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'  
        },  
        prepareNextFile:true,//如果是多文件，能节约耗时，避免等待
        fileSingleSizeLimit:size*1024*1024,
        method:'POST',
        resize:"jpeg",//false则不压缩,jpeg默认在上传前会压缩一次
        threads:1
    }); 
    uploader.on("error",function (type){
        if (type=="Q_TYPE_DENIED"){
            alertMsg("请上传gif,jpg,jpeg,bmp,png格式图片");
        }else if(type=="F_EXCEED_SIZE"){
            alertMsg("单张图片文件大小不能超过"+size+"M");
        }
        return;
    });
    $(domId).click(function(){  
        $(domId).find("input").click(function(event){
            event.stopPropagation(); 
        });
        $(this).find('input').click();  
    });
}

上面的是初始化公共的，写了个简单的，自己并不擅长前端。开始想用input的，始终不行，最后无奈还是要按官方的来用的一个div容器，然后他自己生成按钮。因为我们有自己的样式等，不能用它的按钮，最后总算解决
初始化之后，页面会生成2个div，第二个div里面会有input，绑定元素（如id为upload_file）的div里面的元素会纳入到它自己生成的第一个div里面去

然后定义的id却变成了span。有自己的id，如果同意id的容器初始化多次，里面会有很多div和input，并且是成子父级的

下面就是我踩的坑了。

在我调用了initWebUploader初始化之后，uploadSuccess函数官方的例子里面参数只有一个file，看了一个小时的官方文档也没有返回数据的东西。然后感觉后面应该是会有一个参数用来处理返回数据的。就实验了一下，还真是。但是官方例子里面却没写上去。

上传这里很多都是需要上传多个文件的，它上传是一个一个传的。上传了一个之后再请求上传，我基本都要限制上传图片数量的，能上传照片补齐剩下的张数又要限制多余的不能上传。官方可以配置fileNumLimit来处理上传张数限制，但是还是会上传前面的照片，比如限制5张，选了6张，还是会上传前5张。因为要处理自己的业务逻辑，所以自己判断写了。满足8张就清空队列不上传了。

做个小计，方便以后使用再次查看。如有错误之处，还望指正!