<script type="text/javascript">
/**
* 封装上传组件
* @param list
* @param filePicker_image
* @param image_preview
* @param image
* @param more 是否图集
* @param upload_allowext 格式限制
* @param size 大小限制
* @param type 上传类型[file/img]
*/
function webupload(list, filePicker_image, image_preview, image, more, upload_allowext, size, type) {
if (upload_allowext) {
upload_allowext = upload_allowext.replace(/\|/g, ",");
}
if (size) {
size = size * 1024;
} else {
size = 10240 * 1024 * 1024;
}
type = type || 'img';
var $list = $("#" + list + ""); // 这几个初始化全局的百度文档上没说明,好蛋疼
var GUID = WebUploader.Base.guid(); // 一个GUID
var uploader = WebUploader.create({
auto: true, // 选完文件后,是否自动上传。
swf: '/static/plugins/webuploader-0.1.5/uploader.swf', // 加载swf文件,路径一定要对
server: '{:url("upload/index")}' + '?upload_type=' + type, // 文件接收服务端
pick: '#' + filePicker_image, // 选择文件的按钮。可选。
resize: false, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
chunked: true, // 是否分片
chunkSize: 5 * 1024 * 1024, // 分片大小
threads: 1, // 上传并发数
formData: {
// 由于Http的无状态特征,在往服务器发送数据过程传递一个进入当前页面是生成的GUID作为标示
GUID: GUID, // 自定义参数
},
compress: false,
fileSingleSizeLimit: size, // 限制大小200M,单文件
//fileSizeLimit: allMaxSize*1024*1024, // 限制大小10M,所有被选文件,超出选择不上
accept: {
title: '上传图片/文件',
extensions: upload_allowext, // 允许上传的类型 'gif,jpg,jpeg,bmp,png'
mimeTypes: '*', // 默认全部文件,为兼容上传文件功能,如只上传图片可写成img/*
}
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $list,
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
//$li.find('p.state').text('上传中');
$percent.css('width', percentage * 100 + '%');
});
uploader.on('uploadSuccess', function (file, response) {
if (response.code == 0) {
$.modal.alertError(response.msg);
}
var url = response.url;
if (more == true) {
var images = '' +
'<div class="row no-gutters">' +
' <div class="col-4 col-sm-6"><input type="text" name="' + image + '[]" value="' + url + '" class="form-control"/></div>' +
' <div class="col-3 col-sm-3"><input class="form-control input-sm" type="text" name="' + image + '_title[]" value="' + file.name + '" ></div>' +
' <div class="col-4 col-sm-3">' +
' <div class="btn-group">' +
' <button type="button" class="btn btn-default btn-sm move_up_images"><i class="fa fa-chevron-up"></i></button>' +
' <button type="button" class="btn btn-default btn-sm move_down_images"><i class="fa fa-chevron-down"></i></button>' +
' <button type="button" class="btn btn-default btn-sm remove_images"><i class="fa fa-times"></i></button>' +
' </div>' +
' </div>' +
'</div>';
var images_list = $('#more_images_' + image).html();
$('#more_images_' + image).html(images + images_list);
} else {
$("input[name='" + image + "']").val(url);
$("#" + image_preview).attr('src', url);
$("#" + image_preview).parent("a").attr('href', url);
}
});
uploader.on('uploadComplete', function (file) {
<!-- 折腾侠:当多个文件上传完成后,把“.progress”元素设置成隐藏,导致第二个文件上传以后的进度条无法显示。 -->
<!-- 原代码:$list.find('.progress').fadeOut(); -->
$list.find('.progress').remove();
<!-- 折腾侠:上传完成后,把“.progress”元素直接删除,下一个文件上传时就会显示进度条。 -->
});
// 错误提示
uploader.on("error", function (type) {
if (type == "Q_TYPE_DENIED") {
$.modal.alertError('请上传' + upload_allowext + '格式的文件!');
} else if (type == "F_EXCEED_SIZE") {
$.modal.alertError('单个文件大小不能超过' + size / 1024 + 'kb!');
} else if (type == "F_DUPLICATE") {
$.modal.alertError('请不要重复选择文件');
} else {
$.modal.alertError('上传出错!请检查后重新上传!错误代码' + type);
}
});
}
</script>
参见代码中“折腾侠”注释部分。