python bootstrap 文件上传_bootstrap-fileinput上传组件

/**

* @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: '拖拽文件到这里，或点击此处选择文件 …
支持多文件同时上传',

dropZoneClickTitle: '
文件类型' + type,

autoReplace: true,//是否替换

validateInitialCount: true,

allowedFileExtensions: (undefined != fileType && fileType.length > 0) ? fileType : ['doc', 'docx', 'xls', 'xlsx', 'pdf'],

msgInvalidFileExtension: '上传文件类型错误"{name}".只能上传"{extensions}"类型的文件',

initialPreview: preview,//初始预览内容

previewSettings: {

image: {width: '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: '  ',

/*previewFileIconSettings: { // configure your icon file extensions

'doc': '',

'xls': '',

//'ppt': '',

'pdf': '',

//'zip': '',

//'htm': '',

//'txt': '',

//'mov': '',

//'mp3': '',

// note for these file types below no extension determination logic

// has been configured (the keys itself will be used as extensions)

'jpg': '',

//'gif': '',

'png': ''

},

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()

}