webuploader上传遇到的问题

文件上传空间webuploader +jquery,开源而且好用。但是在使用过程中出现一些问题。

问题

1.上传多张图片,图片的顺序会乱掉.解决方法 threads:1

2.文件没有按照原来比例上传,1M多的文件会被压缩,解决方法 compress: false

3.选择文件的时候浏览器反应迟钝,解决方法:accept: {
       title: 'Images',
       extensions: "gif,jpg,jpeg,png",       
       mimeTypes: ".gif,.jpg,.jpeg,.png"}

4.ie浏览器,上传文件失败,有可能是"swf"。定义的文件路径不对。

ie浏览器是用flash模式上传文件的。


var fileCount=0;
var fileSize=0;
var uploader;
var errorarr=new Array();
function initFile(){
	uploader = WebUploader.create({
		auto: true,
		// swf文件路径
		swf : '/ueditor/third-party/webuploader/Uploader.swf',
		// 文件接收服务端。
		server : "upFiles.do",
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建,可能是input元素,也可能是flash.
		pick : '#filePicker',
		// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
		//resize : false,//这个不起作用,要用compress
		compress: false,//webuploader默认压缩图片,设置compress:false,可以按照原始比例上传图片
		accept: {
	        title: 'Images',
	        extensions: "gif,jpg,jpeg,png",	        
	        mimeTypes: ".gif,.jpg,.jpeg,.png"//解决WebUploader在谷歌浏览器中反应缓慢迟钝,虽然解决了问题,但是火狐浏览器,选择文件的时候不做限制了
	      
	    },	    
	    fileVal:"upfile",//设置文件上传域的name。
	    fileSizeLimit:500 * 1024 * 1024,//所有文件上传的大小限制,单位字节
		fileSingleSizeLimit:2 * 1024 * 1024,//单张图片上传限制大小,单位字节	
		fileNumLimit:20,//文件上传数量限制
	    threads:1//上传并发数。允许同时最大上传进程数,为了保证文件上传顺序
	});
	/*当文件被加入队列以后触发。
	@param file File对象
	@param ret 服务器返回的数据
	*/
	uploader.on('uploadSuccess', function (file, ret) {
        var $file = $('#' + file.id);
       try {            
            if (ret.state == 'SUCCESS') {            	
	    		var json={};
	    		json.dataid=ret.picId;
	    		json.src=ret.url;   
	    		json.width=ret.width;
	    		json.height=ret.height;
	    		if(!putPicMap(json)){//加入图片列表
	    			return false;
	    		}
	    		
            }else {
                //console.log("faile","aa");
            }
        } catch (e) {
            //console.log("faile","bb");
        }
    });
	/**
	*文件上传失败
	*code=F_DUPLICATE 上传文件重复
	**/
	 uploader.on('error', function (code, file) {
		 var name=file.name;
		 var str="";
		 switch(code){
		 case "F_DUPLICATE":
			 str=name+"文件重复";
			 errorarr.push(str);
			 break;
		 case "Q_TYPE_DENIED":
			 str=name+"文件类型 不允许";
			 errorarr.push(str);
			 break;
		 case "F_EXCEED_SIZE":				
			var imageMaxSize = 9;//通过计算
			str=name+"文件大小超出限制"+imageMaxSize+"M"; 
			errorarr.push(str); 
			break; 
		 case "Q_EXCEED_SIZE_LIMIT":
			 errorarr.push("超出空间文件大小");
			
         	 break;
		 case "Q_EXCEED_NUM_LIMIT":
			 errorarr.push("抱歉,超过每次上传数量图片限制");			 
			 
         default:
        	 str=name+" Error:"+code;
		 }
		
     });	
	 uploader.on( 'all', function( type, arg1, arg2 ) {
	    if(type=="startUpload"){//开始上传
	    	uploadchange();
	    }else if(type=="uploadFinished"){//上传结束
	    	if(errorarr.length>0){
	    		alert(errorarr.join("\n"));
	    		
	    	}
	    	//清空错误信息
	    	errorarr.length=0;
	    }
	});
		
}
/**
 * 本地上传图片,改变上传的相册,文件上传的路径也会改变
 */
function uploadchange(){
	//这里可以限制文件上传个数,未做
	
	
    /* 添加额外的GET参数 */    
	uploader.option('server', "upFiles.do?aa=3");
}



  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值