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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值