百度文件上传 WebUploader 常用方法和多个上传
<div class="comment-upload" data-id="1"> <div class="upload-pics"> <div class="up-btn up-btn-1"> <img src="/images/upload.png"> <p>添加图片/视频</p> </div> </div> </div> <div class="comment-upload" data-id="2"> <div class="upload-pics"> <div class="up-btn up-btn-2"> <img src="/images/upload.png"> <p>添加图片/视频</p> </div> </div> </div> <div class="comment-upload" data-id="3"> <div class="upload-pics"> <div class="up-btn up-btn-3"> <img src="/images/upload.png"> <p>添加图片/视频</p> </div> </div> </div>
var ary_comments_upload_file = {
"comments_allow_picture_ext": ["jpg", "png", "gif", "jpeg"],
"comments_allow_video_ext": ["mp4", "avi", "mov", "rmvb", "rm", "flv", "3GP"],
"comments_allow_picture_max_size": 10,
"comments_allow_video_max_size": 50
};
$(".comment-upload").each(function () {
var _index = $(this).attr('data-id');
var file_size = 0;
//文件上传
uploader[_index] = WebUploader.create({
swf: "/upload/webuploader/Uploader.swf",
server: '/wap/comment/upload',
pick: $(".up-btn-" + _index),
accept: {
title: '文件上传',
extensions: 'mp4,mov,rmvb,rm,mkv,wmv,avi,jpeg,png,gif,jpg', // 可以多个后缀，以逗号分隔， 不要有空格
mimeTypes: 'video/*,image/*'
},
chunked: true,//开启分片上传
chunkSize: 5 * 1024 * 1024,//每片文件大小上限
threads: 1,//上传并发数
//不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传！
resize: false,
fileSizeLimit: 100 * 1024 * 1024, //可传文件大小上限
//fileSingleSizeLimit: 100 * 1024 * 1024, //单片文件大小上限
auto: true,//有文件就自动上传
duplicate: true,//文件去重
//fileNumLimit: 7,
formData: {
},
compress: {compressSize: 100 * 1024 * 1024}
});
// 当文件上传成功时触发。
uploader[_index].on('uploadSuccess', function (file, res) {
if (res['status'] == false) {
layer.msg(res.msg);
return;
}
});
// 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
uploader[_index].on('uploadBeforeSend', function (object, data, headers) {
data.file_size = object.total;
});
// 当文件被加入队列之前触发，此事件的handler返回值为false，则此文件不会被添加进入队列。
uploader[_index].on('beforeFileQueued', function (file) {
var type = file.type;
type = type.substring(0, 5);
file_size = file.size / 1024 / 1024;
var file_ext = file.ext;
if (!in_array(ary_comments_upload_file['comments_allow_picture_ext'], file_ext) && !in_array(ary_comments_upload_file['comments_allow_video_ext'], file_ext)) {
layer.msg('不支持的文件格式！');
}
if (type == 'image') {
if (file_size > ary_comments_upload_file['comments_allow_picture_max_size']) {
layer.msg('只允许上传 ' + ary_comments_upload_file['comments_allow_picture_max_size'] + 'MB 以内的图片！');
return false;
}
} else if (type == 'video') {
if (file_size > ary_comments_upload_file['comments_allow_video_max_size']) {
layer.msg('只允许上传 ' + ary_comments_upload_file['comments_allow_video_max_size'] + 'MB 以内的视频！');
return false;
}
}
});
// 某个文件开始上传前触发，一个文件只会触发一次。
uploader[_index].on('uploadStart', function () {
layer_index = layer.load(2);
});
// 不管成功或者失败，文件上传完成时触发。
uploader[_index].on('uploadComplete', function (file) {
int_image = 0;
int_video = 0;
layer.close(layer_index);
});
// 当一批文件添加进队列以后触发。
uploader[_index].on('filesQueued', function (files) {
for (var i = 0, len = files.length; i < len; i++) {
var type = files[i]['type'];
type = type.substring(0, 5);
if (type == 'image') {
console.log(type);
} else if (type == 'video') {
console.log(type);
}
}
});
// 当validate不通过时，会以派送错误事件的形式通知调用者。
uploader[_index].on('error', function (type) {
console.log(type);
});
});
function in_array(array, val) {
for (var i = 0; i < array.length; i++) {
if (val == array[i]) {
return true;
}
}
return false;
}
