bootstrap-fileinput使用实例
一、上传
var prefix = ctx + "pub/document"
var files = [];
$(document).ready(function () {
// 文件上传组件初始化
$("#fileUpload").fileinput({
layoutTemplates: {
// 隐藏上传小图标
actionUpload: ''
},
uploadUrl: ctx + 'common/uploads',
//maxFileCount: 1,
//autoReplace: true,
showCaption: false,// 是否显示标题
uploadAsync: false,// 是否为异步上传
showClose: false,
showRemove: false,
dropZoneTitle: `拖拽文件或者点击下方选择按钮...<br/><b style="color: black;">记得点击上传按钮</b>`,
allowedFileExtensions: ['pdf', 'doc', 'docx'], // 允许上传的文件扩展
msgInvalidFileExtension: "只支持pdf、word文件,请重新选择!",
}).on('filebatchuploadsuccess', function (event, data, previewId, index) {
//debugger;
var rsp = data.response;
// log.info("return urls:" + rsp.urls)
// log.info("reutrn fileNames:" + rsp.fileNames)
// log.info("reutrn newFileNames:" + rsp.newFileNames)
// log.info("return originalFilenames:" + rsp.originalFilenames)
// 将后台传的数据转化为数组
let urlArray = rsp.fileNames.toString().split(",");
let nameArray = rsp.originalFilenames.toString().split(",");
// 找到以“thumb-fileUpload-”前缀的div标签, 注意:这里是总的数目
let divArray = $('div[id^="thumb-fileUpload-"]');
let length = files.length;
for (let i = 0; i < data.filescount; i++) {
files.push({fileUrl:urlArray[i], fileName:nameArray[i], id:divArray[length + i].id });
}
}).on('filesuccessremove', function (event, id) {
// 上传完成后, 移除成功通知
//debugger;
for (let i = 0; i < files.length; i++) {
if (id === files[i].id) {
// 删除物理文件
$.operate.post(prefix + "/deleteFile", {key: files[i].fileUrl})
files.splice(i, 1)
break;
}
}
})
});
// 表单提交方法
function submitHandler() {
if (files.length === 0) {
$.modal.msgWarning('请先上传文件');
return;
}
let fileName = '',fileUrl = '';
// 遍历文件信息,封装数据
for (let i = 0; i < files.length; i++) {
if (i !== 0) {
fileName += ',';
fileUrl += ',';
}
fileName += files[i].fileName;
fileUrl += files[i].fileUrl;
}
$("input[name='fileUrl']").val(fileUrl)
$("input[name='fileName']").val(fileName)
// 表单校验及保存
if ($.validate.form()) {
$.operate.save(prefix + "/add", $('#form-document-add').serialize());
}
}
二、编辑
var prefix = ctx + "meetingroom/room"; $("#form-room-edit").validate({ focusCleanup: true }); // 新增文件列表 var files = []; // 文件地址 var fileUrls = [[${meetingRoom.imgsUrl}]]; var urlArray = fileUrls.toString().split(','); // 文件名称 var fileNames = [[${meetingRoom.imgsName}]]; var nameArray = fileNames.toString().split(','); // 文件回显数组 var initialPreview = []; var initialPreviewConfig = []; for (let i = 0; i < urlArray.length; i++) { initialPreview.push(ctx + urlArray[i]); initialPreviewConfig.push(getFileConfig(ctx + urlArray[i], urlArray[i], nameArray[i])); } // 预览的个数 var initialLength = initialPreview.length; $(document).ready(function () { // 文件上传组件初始化 $("#fileUpload").fileinput({ layoutTemplates: { // 隐藏上传小图标 actionUpload: '' }, uploadUrl: ctx + 'common/uploads', //maxFileCount: 1, showCaption: false,//是否显示标题 uploadAsync: false,// 是否为异步上传 showClose: false, showRemove: false, overwriteInitial: false, // 上传新文件不覆盖预览的 initialPreview: initialPreview, initialPreviewConfig: initialPreviewConfig, deleteUrl: prefix + "/removeByUrl", // 预览文件删除路径 initialPreviewAsData: true, // 默认为数据 dropZoneTitle: `拖拽文件或者点击下方选择按钮...<br/><b style="color: black;">记得点击上传按钮</b>`, allowedFileExtensions: ['png', 'jpg'], // 允许上传的文件扩展 msgInvalidFileExtension: "只支持图片文件,请重新选择!", }).on('filebatchuploadsuccess', function (event, data, previewId, index) { var rsp = data.response; // log.info("return urls:" + rsp.urls) // log.info("reutrn fileNames:" + rsp.fileNames) // log.info("reutrn newFileNames:" + rsp.newFileNames) // log.info("return originalFilenames:" + rsp.originalFilenames) // 将后台传的数据转化为数组 let urlArray = rsp.fileNames.toString().split(","); let nameArray = rsp.originalFilenames.toString().split(","); // 找到以“thumb-fileUpload-”前缀的div标签, 注意:这里是总的数目 let divArray = $('div[id^="thumb-fileUpload-"]'); // 已加文件数目 let length = files.length; for (let i = 0; i < data.filescount; i++) { files.push({fileUrl:urlArray[i], fileName:nameArray[i], id:divArray[length + initialLength + i].id }); } }).on('filesuccessremove', function (event, id) { // 上传完成后, 移除成功通知 for (let i = 0; i < files.length; i++) { if (id === files[i].id) { // 删除物理文件 $.operate.post(prefix + "/deleteFile", {key: files[i].fileUrl}) files.splice(i, 1) break; } } }).on('filedeleted', function (event, key) { // 监听删除预览的事件 initialLength = initialLength -1; }) }); /** * 获取文件回显配置 * @param fileUrl * @param key 传给后台删除的路径 */ function getFileConfig(url, key, name) { if(url != null && url !== ''){ // 获取文件后缀 var type = url.substr(url.lastIndexOf('.') + 1); return {type: "image", caption: name, key: key, downloadUrl: url}; } } function submitHandler() { if (files.length === 0 && initialLength === 0) { $.modal.msgWarning('请先上传文件'); return; } let fileName = '',fileUrl = ''; // 遍历文件信息,封装数据 for (let i = 0; i < files.length; i++) { if (i !== 0) { fileName += ','; fileUrl += ','; } fileName += files[i].fileName; fileUrl += files[i].fileUrl; } $("input[name='imgsUrl']").val(fileUrl) $("input[name='imgsName']").val(fileName) if ($.validate.form()) { $.operate.save(prefix + "/edit", $('#form-room-edit').serialize()); } }