zoukankan      html  css  js  c++  java
  • webuploader解决不能重复上传问题及一些常见问题处理

    uploader = WebUploader.create({
        swf: 'resources/js/webuploader-0.1.5/Uploader.swf',  
        // 文件接收服务端。
        server: settings.url,
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建,可能是input元素,也可能是flash。
        pick : '#picker',
        // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
        resize : false    
    });

      以上代码是不支持重复上传:根据查看webuploader文档里面有个duplicate属性,是可选的,true为可重复,false为不可重复,默认为undifind,也是不可重复。所以只需在属性的后面追加  duplicate:true  就可以实现重复上传。

    uploader = WebUploader.create({  
        swf: 'resources/js/webuploader-0.1.5/Uploader.swf',  
        // 文件接收服务端。  
        server: settings.url,  
        // 选择文件的按钮。可选。  
        // 内部根据当前运行是创建,可能是input元素,也可能是flash.  
        pick : '#picker',  
        // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!  
        resize : false,  
        //可重复上传
        duplicate :true  
    });  

       文件上传控件: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("
    ")); 
                }
                //清空错误信息
                errorarr.length=0;
            }
        });     
    }
    /**
     * 本地上传图片,改变上传的相册,文件上传的路径也会改变
     */
    function uploadchange(){
        //这里可以限制文件上传个数,未做
        /* 添加额外的GET参数 */    
        uploader.option('server', "upFiles.do?aa=3");
    }
  • 相关阅读:
    开发记录4
    开发记录3
    豆瓣的基础架构读后感
    开发记录2
    开发记录1
    大数据技术大作业1
    新浪微博平台架构读后感
    第一阶段冲刺第五天
    第一阶段冲刺第四天
    第一阶段冲刺第三天
  • 原文地址:https://www.cnblogs.com/goloving/p/7391474.html
Copyright © 2011-2022 走看看