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 = $('<div class="picbox"><div class="loading"></div>'

+ '<div class="pop_mask"></div><div class="num" id='

+ file.id + '>ok</div></div>');

$(".piclist ").append($li);

uploader.makeThumb(file, function(error, src) {

if (error) {

$img.replaceWith('<span>不能预览</span>');

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 = $('<p class="progressBar"><span></span></p>')

                .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;

}

})

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