webuploader 文件上传总结

$(function() {
/**
* 初始化Web Uploader
*/
var uploader = WebUploader.create({
swf : '../mobile/Uploader.swf',// swf文件路径
server : "/upload.do",// 文件接收服务端。
auto : true,// 选完文件后，是否自动上传。
// 上传参数列表(这里可以暂时不写，可以在点击按钮时 uploader.options.formData = obj;)
formData : {
id : id,
name : name
},
// 指定选择文件的按钮
pick : {
id : '#file',// 指定选择文件的按钮的ID，class等
multiple : true,// 是否开起同时选择多个文件能力
innerHTML : "上传"// 指定按钮文字
},
// 指定接受哪些类型的文件
accept : {
title : 'Images',
extensions : 'jpg,png,jpeg',
mimeTypes : 'image/*'
},
// 配置生成缩略图的选项(可不写)
thumb : {
// 缩略图的宽高，当取值介于0-1时，被当成百分比使用
width : 500,
height : 250,
// 强制转换成指定的类型
type : "image/jpeg",
// 图片质量，只有type为image/jpeg的时候才有效
quality : 70,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false
allowMagnify : true,
// 是否允许裁剪
crop : true
},


// 是否压缩图片, 默认如果是jpeg文件上传前会压缩，如果是false, 则图片在上传前不进行压缩
// compress:false,
compress : {
// 压缩后的尺寸
width : 100,
height : 100,
// 图片质量，只有type为image/jpeg的时候才有效。
quality : 90,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false
allowMagnify : false,
// 是否允许裁剪
crop : false,
// 是否保留头部meta信息
preserveHeaders : true,
// 如果发现压缩后文件大小比原来还大，则使用原来图片，此属性可能会影响图片自动纠正功能
noCompressIfLarger : false,
// 单位字节，如果图片大小小于此值，不会采用压缩
compressSize : 0
},
duplicate : false,// 不允许重复上传
resize : false,// 尺寸不改变
method : 'POST',// 文件上传方式，POST或者GET，默认值：'POST'
disableGlobalDnd : true,// 是否禁掉整个页面的拖拽功能
fileNumLimit : 50,// 每次上传文件数
fileSizeLimit : 1000 * 1024 * 1024,// 每次上传文件的大小总和
fileSingleSizeLimit : 20 * 1024 * 1024,// 单个上传文件的大小
threads : 10,// 上传并发数。允许同时最大上传进程数。


});


/**
* 点击上传按钮
*/
// $("#file").click(function() {
// $(".webuploader-element-invisible").click();
// })


/**
* 点击上传按钮
*/
$("#file").on('click',function(event){

// var obj = new Object();
// obj.id = id;
// obj.name = name;
// uploader.options.formData = obj;

//手动上传
uploader.upload();
//手动停止
uploader.stop();

});


/**
* 先执行此方法
*/
uploader.on('all', function (type) {
        if (type === 'beforeFileQueued') {
           //当文件被加入队列之前触发
        } else if (type === 'fileQueued') {
            //当文件被加入队列以后触发(加一个文件就触发一次)
        } else if (type === 'filesQueued') {
            //当一批文件添加进队列以后触发(当所有文件都加完后触发)
        } else if (type === 'fileDequeued') {
        //当文件被移除队列后触发
        } else if (type === 'reset') {
        //当 uploader 被重置的时候触发
        } else if (type === 'startUpload') {
        //当开始上传流程时触发
        } else if (type === 'stopUpload') {
        //当开始上传流程暂停时触发。
        } else if (type === 'uploadFinished') {
        //当所有文件上传结束时触发。
        } else if (type === 'uploadStart') {
        //某个文件开始上传前触发，一个文件只会触发一次。
        } else if (type === 'uploadProgress') {
        //上传过程中触发，携带上传进度。
        } else if (type === 'uploadError') {
        //当文件上传出错时触发。
        } else if (type === 'uploadSuccess') {
        //当文件上传成功时触发。
        } else if (type === 'uploadComplete') {
        //不管成功或者失败，文件上传完成时触发
        } else if (type === 'error') {
        //当validate不通过时，会以派送错误事件的形式通知调用者
        }         
    });

/**
* 开始上传
*/
uploader.on('startUpload', function() {
//console.log("开始上传:startUpload");
})


/**
* 把上传的图片加入队列
*/
uploader.on('fileQueued', function(file) {
var $li = $('

'
+ '

ok

');
$(".piclist ").append($li);
uploader.makeThumb(file, function(error, src) {
if (error) {
$img.replaceWith('不能预览');
return;
}
$li.attr('style', "background-image:url(" + src + ");");
}, 200, 200);
})


/**
* 上传过程中监视上传文件是否符合条件 
*/
uploader.on("error", function(code) {
if (code == "Q_EXCEED_NUM_LIMIT") {
loading = layer.msg('一次上传的文件不能多于50张', {
icon : 7,
shade : 0.01,
time : 1000
});
}
if (code == "F_EXCEED_SIZE") {
loading = layer.msg('文件大小不能大于20M', {
icon : 7,
shade : 0.01,
time : 1000
});
}
if (code == "Q_EXCEED_SIZE_LIMIT") {
loading = layer.msg('一次上传所有文件总大小不能大于1000M', {
icon : 7,
shade : 0.01,
time : 1000
});
}
if (code == "Q_TYPE_DENIED") {
loading = layer.msg('上传文件类型只支持jpg,png,jpeg格式', {
icon : 7,
shade : 0.01,
time : 1000
});
}
if (code == "F_DUPLICATE") {
loading = layer.msg('上传文件有重复', {
icon : 7,
shade : 0.01,
time : 1000
});
}
});


    /**
     * 上传进度条
     */
uploader.on( 'uploadProgress', function( file, percentage ) {
//console.log(file.id);
var $progress = $( '#'+file.id );
var $progressNum = $progress.find(".mb5");
var $progressBar = $progress.find(".progressBar");
    // 避免重复创建
    if ( !$progressBar.length ) {
        $percent = $('

')
                .appendTo( $("#"+file.id).parent())
                .find('span');
    }
    $progressBar.css( 'width', percentage * 100 + '%' );
    $progressNum.text(percentage * 100+'%');
});

/**
* 上传成功
*/
uploader.on('uploadSuccess', function(file, ret) {


if (ret.success == true) {// 正常


} else {
$("#" + file.id).parent().remove();
alert(file.name + "上传失败，请选择其他照片。");
return;
}


var data = {};
var response = "{\"picId\":\"" + ret.picId + "\",\"width\":\""
+ ret.width + "\",\"height\":\"" + ret.height
+ "\",\"filePath\":\"" + ret.filePath + "\"}\r\n";
data["from"] = from;
data["text"] = response;
data["to"] = "PC_" + webuuid;
websocket.send(JSON.stringify(data));


});


/**
* 上传失败
*/
uploader.on('uploadError', function(file) {
layer.open({
    title:"温馨提示",
    content:"上传图片不符合要求"
    });
$("#" + file.id).parent().remove();
})
/**
* 上传失败或成功都会执行
*/
uploader.on('uploadComplete', function(file) {
$("#" + file.id).parent().find(".loading").remove();
$("#" + file.id).parent().find(".pop_mask").remove();
})


uploader.on('uploadFinished', function() {
$(".loading").each(function() {
$(this).parent().remove();
});
$("#pop_mask").hide();
$("#noti").hide();
uploader.reset();
});


function hashString(str) {
var hash = 0, i = 0, len = str.length, _char;
for (; i < len; i++) {
_char = str.charCodeAt(i);
hash = _char + (hash << 6) + (hash << 16) - hash;
}
console.log("hashcode:" + hash);
return hash;
}

})

注：本文是自己总结，如有错误敬请谅解，评论指出错误，共同进步，共勉，谢谢。