bootstrap-fileinput上传组件197

/**
* @param preview 文件列表
* @param config 配置项
* @param valueId 存放附件id的id
* @param fildRegisterId 注册组件的id
* @param fileType 文件上传类型 []
* @param validatorField 验证id
*/
function initDeclaredeclareUpload(preview, config, valueId, fildRegisterId, fileType, validatorField) {
let fileIds = [];
let htmlFileid = $("#" + valueId).val();
if (htmlFileid) {
if (htmlFileid.indexOf(',') > -1) {
let idsdb = htmlFileid.split(',');
fileIds = fileIds.concat(idsdb);
} else {
fileIds.push(htmlFileid);
}
}
let map = new Map();
let type = '';//文件提示限制类型
if (fileType && fileType.length > 0) {
type = fileType.join(',')
} else {
type = ".doc, .docx, .xls, .xlsx, .pdf";
}
$("#" + fildRegisterId).fileinput({
theme: "explorer",
uploadUrl: "/file/uploadFile", //上传的地址
// uploadExtraData:{pdId:pdId},
minFileCount: 0,
maxFileCount: 20,
overwriteInitial: false,
showUpload: true, //是否显示上传按钮
showCaption: true,//是否显示标题
showRemove: false,
showBrowse: true,
browseOnZoneClick: true,
language: 'zh',
dropZoneTitle: '拖拽文件到这里,或点击此处选择文件 &hellip;<br>支持多文件同时上传',
dropZoneClickTitle: '<br>文件类型' + type,
autoReplace: true,//是否替换
validateInitialCount: true,
allowedFileExtensions: (undefined != fileType && fileType.length > 0) ? fileType : ['doc', 'docx', 'xls', 'xlsx', 'pdf'],
msgInvalidFileExtension: '上传文件类型错误"{name}".只能上传"{extensions}"类型的文件',
initialPreview: preview,//初始预览内容
previewSettings: {
image: { '150px', height: '150px'}
},
/*initialPreviewAsData: true, // defaults markup
uploadExtraData: {
img_key: "1000",
img_keywords: "happy, nature",

},*/
initialPreviewConfig: config,
/*initialPreviewConfig: [
{caption: "Business 1.jpg", size: 762980, url: "/site/file-delete", key: 11},
{caption: "Business 2.jpg", size: 823782, url: "/site/file-delete", key: 13, previewAsData: false},
{caption: "PDF Sample.pdf", size: 8000, url: "/site/file-delete", key: 14, type: "pdf"},
//{caption: "Lorem Ipsum.txt", type: "text", size: 1430, url: "/site/file-delete", key: 12},
//{type: "video", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "/site/file-delete", key: 15},
],*/
preferIconicPreview: true, // this will force thumbnails to display icons for following file extensions
// previewFileIcon: '<i class="glyphicon glyphicon-file"></i> &nbsp;',
/*previewFileIconSettings: { // configure your icon file extensions
'doc': '<i class="fa fa-file-word-o text-primary" ><img src="/images/wj.png" style=" 30px;height: 30px"/></i>',
'xls': '<i class="fa fa-file-excel-o text-success"><img src="/images/wj.png"/></i>',
//'ppt': '<i class="fa fa-file-powerpoint-o text-danger"><img src="/img/excel.png"/></i>',
'pdf': '<i class="fa fa-file-pdf-o text-danger"><img src="/images/wj.png"/></i>',
//'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
//'htm': '<i class="fa fa-file-code-o text-info"></i>',
//'txt': '<i class="fa fa-file-text-o text-info"><img src="/img/excel.png"/></i>',
//'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
//'mp3': '<i class="fa fa-file-audio-o text-warning"></i>',
// note for these file types below no extension determination logic
// has been configured (the keys itself will be used as extensions)
'jpg': '<i class="fa fa-file-photo-o text-danger"><img src="/images/wj.png"/></i>',
//'gif': '<i class="fa fa-file-photo-o text-muted"></i>',
'png': '<i class="fa fa-file-photo-o text-primary"><img src="/images/wj.png"/></i>'
},
previewFileExtSettings: { // configure the logic for determining icon file extensions
'doc': function (ext) {
return ext.match(/(doc|docx)$/i);
},
'xls': function (ext) {
return ext.match(/(xls|xlsx)$/i);
},
'ppt': function (ext) {
return ext.match(/(ppt|pptx)$/i);
},
'zip': function (ext) {
return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
},
'htm': function (ext) {
return ext.match(/(htm|html)$/i);
},
'txt': function (ext) {
return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
},
'mov': function (ext) {
return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
},
'mp3': function (ext) {
return ext.match(/(mp3|wav)$/i);
},
}*/
}).on("filebatchselected", function (event, files) {
$(this).fileinput("upload");
}).on('fileuploaderror', function (event, data, extraData) {
layer.msg(extraData, {
time: 2000, icon: 2
})
}).on('fileuploaded', function (event, data, extraData) {
fileIds.push(data.response.data);
map.set(extraData, data.response.data);
fileOperation(fileIds, 'add', '', valueId);

//表单验证
var projectFileForm = $("#projectFileForm");
if (validatorField && projectFileForm) {
try {
var validator = projectFileForm.data('bootstrapValidator');
validator.updateStatus(validatorField, 'VALID');
} catch (e) {
}
}
}).on('filesuccessremove', function (event, key) {
let id = map.get(key)
fileOperation(fileIds, 'del', id, valueId)
}).on('filedeleted', function (event, key) {
fileOperation(fileIds, 'del', key, valueId);

//表单验证
if (validatorField && !fileIds) {
try {
var $projectFileForm = $("#projectFileForm");
var validator = $projectFileForm.data('bootstrapValidator');
validator.updateStatus(validatorField, 'INVALID');
} catch (e) {
}
}
});
}

/**
* 初始化文件上传
* @param valueId 存放附件id的id
* @param fildRegisterId 注册组件的id
* @param fileType 文件上传类型 []
*/
function initUploadFileInfo(valueId, fildRegisterId, fileType, validatorField) {
let sfzZIds = $("#" + valueId).val();
let sfzZImgs = [];
let sfzZConfig = [];
if (sfzZIds) {
if (sfzZIds.indexOf(',') > 0) {
let sfzZIdsSplit = sfzZIds.split(',');
sfzZIdsSplit.forEach(item => {
sfzZImgs.push('/file/imageView/' + item);
//添加配置项
let obj = {};
obj.url = "/file/delOneFileById/";
obj.key = item;
let data = getFileName(item);
obj.caption = data.fileName;
sfzZConfig.push(obj);
})
} else {
let data = getFileName(sfzZIds);
sfzZImgs.push('/file/imageView/' + sfzZIds);
//添加配置项
let obj = {};
obj.url = "/file/delOneFileById/";
obj.key = sfzZIds;
obj.caption = data.fileName;
sfzZConfig.push(obj);
}
}
initDeclaredeclareUpload(sfzZImgs, sfzZConfig, valueId, fildRegisterId, fileType, validatorField);
}

/**
* 根据文件id获取文件名称
* @param id
*/
function getFileName(id) {
let obj = {}
$.ajax({
method: 'post',
async: false,
url: '/file/getFileInfoById',
data: {id: id},
success: function (res) {
if (res.retcode === 0) {
obj = res.data
}
}
})
return obj;
}

/**
* 文件id赋给隐藏字段
* @param ids 文件id
* @param type del删除 add添加
* @param key 要删除的id
*/
function fileOperation(ids, type, key, id) {
if (type === 'del') {
let index = ids.indexOf(key);
if (index > -1) {
delete ids[index];
}
}
let values = '';
let i = 0;
//拼接字符串
ids.forEach(item => {
if (i > 0) {
values += "," + item
} else {
values += item
}
if (item) {
i++
}
});
$("#" + id).val(values).change()
}

原文地址:https://www.cnblogs.com/Ai-Hen-Jiao-zhi/p/13953021.html