webuploader上传文件,含文件大小、类型验证

var that = WebUploader.create({

        // 选完文件后,是否自动上传。
        auto: true,

        // swf文件路径
        swf: '/js/webuploader-0.1.5/Uploader.swf',

        // 文件接收服务端。
        server: 'url',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建,可能是input元素,也可能是flash.
        pick: '#'+but,
        fileSingleSizeLimit:maxSize*1024*1024,   //设定单个文件大小

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'jpg,png',
            mimeTypes: 'image/*'
        }

    });
    /**
     * 验证文件格式以及文件大小
     */
    that.on("error",function (type){
        if (type=="Q_TYPE_DENIED"){
            dialogMsg("myModal","messageP","请上传JPG、PNG格式文件");
        }else if(type=="F_EXCEED_SIZE"){
            dialogMsg("myModal","messageP","文件大小不能超过8M");
        }
    });

   // $("#"+but).find(".webuploader-pick").removeClass("webuploader-pick");
   // $("#"+but).find("label").css("margin-top","0px").css("margin-bottom","0px");
   // $("#"+but).find("label").parent().css("height","30px");

    /**
    that.on( 'uploadStart', function( file ) {
        jQuery('#'+err).addClass("hide");
        if (validateFileSize(file.size,maxSize)){
        }else{
            jQuery('#'+err).html("文件大小不能超过"+maxSize+"M");
            jQuery('#'+err).removeClass("hide");
            that.stop(file);
            that.cancelFile(file.id);
        }
    });
*/
    // 当有文件添加进来的时候
    that.on( 'fileQueued', function( file ) {
       // jQuery("#"+btn).attr("disabled",true);
        jQuery('#'+err).addClass("hide");
        jQuery('#'+err).html("");
        $("#"+prevHere).html("");
       // $("#"+uploadPrevpic_text).hide();
        $("#"+prevHere).show();
        $("#"+img_up).show();
        //创建缩略图
        //如果为非图片文件,可以不用调用此方法。
        var $img = $("#"+prevHere).find('img');
        that.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('不能预览');
                return;
            }
            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );

    });

    that.on('uploadBeforeSend',function (object ,data ,headers){
        headers['X-Requested-With']=  'XMLHttpRequest';
    })


    // 上传成功事件
    that.on('uploadSuccess', function (file, response) {
        // 返回的json对象
        var result = response ;
        var url = result.url ;
        var status = result.status ;

        if(status) {
            $("#"+hide_url).val(url);

        } else {
            //文件上传失败
            jQuery('#'+err).removeClass("hide");
            jQuery('#'+err).html(result.msg);
            $("#"+hide_url).val("");
            $("#"+prevHere).html("");
            $("#"+prevHere).hide();
        }

    });
	//上传失败
    that.on( 'uploadError', function( file ) {
        jQuery('#'+err).removeClass("hide");
        jQuery('#'+err).html("图片上传出错!");
        $("#"+hide_url).val("");
        $("#"+prevHere).html("");
        $("#"+prevHere).hide();
       // $("#"+uploadPrevpic_text).show();
    });
    // 完成上传完了,成功或者失败,先删除进度条。
    that.on( 'uploadComplete', function( file ) {
        jQuery("#"+but).attr("disabled",false);
        $("#"+img_up).hide();
        that.removeFile( file,true );
    });

你可能感兴趣的:(前端开发)