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张就清空队列不上传了。

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