You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
5.7 KiB
106 lines
5.7 KiB
<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) {
|
|
$list.find('.progress').fadeOut();
|
|
});
|
|
// 错误提示
|
|
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>
|