Bootstrap中的fileinput多图片上传及编辑功能_bootstrapfileinput编辑,bootstrapfileinput编辑回显

113 浏览量更新于2023-05-12 评论收藏 100KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Bootstrap中的中的fileinput 多图片上传及编辑功能多图片上传及编辑功能

主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能的实现,非常不错，具有参考借鉴价值，需要的朋友可以参考下

大家如果对Bootstrap-fileinput 的配置不清楚的话，大家可以查看官方网站：http://plugins.krajee.com/file-input。

逻辑说明：先从后台获取数据展示，然后进行编辑。

废话不多说，直接上代码.

1. 页面部分代码：页面部分代码：

<label for="inputEmail3" class="col-xs-3 control-label">项目LOGO</label>

</div>

说明：其中onchange()为我业务需要，上传完成后自动执行一个添加事件。此方法可以去掉。

2. 获取初始化数据方法：获取初始化数据方法：

// 初始化获取原有文件

$(function(){

$.ajax({

type : "post",

url : "/eim/project/testFileUpload.do",

dataType : "json",

success : function(data) {

layer.msg('操作成功！');

showPhotos(data);

error: function(XMLHttpRequest, textStatus, errorThrown) {

layer.msg('操作失败！');

}

});

说明：此处我返回是一个对象数组：List<MemberUser>，可以理解为获取一个班中所有的学生，展示头像

3.初始化初始化bootstrap-fileinput 组件：组件：

function showPhotos(djson){

//后台返回json字符串转换为json对象

var reData = eval(djson);

// 预览图片json数据组

var preList = new Array();

for ( var i = 0; i < reData.length; i++) {

var array_element = reData[i];

// 此处指针对.txt判断，其余自行添加

if(array_element.fileIdFile.name.indexOf("txt")>0){

// 非图片类型的展示

preList[i]= "<div class='file-preview-other-frame'><div class='file-preview-other'><span class='file-icon-4x'><i class='fa fa-file-text-o text-info'></i></span></div></div>"

}else{

// 图片类型

preList[i]= "<img src=\"/eim/upload/getIMG.do?savePath="+array_element.fileIdFile.filePath+"&name="+array_element.fileIdFile.name+"\" class=\"file-preview-image\">";

}

var previewJson = preList;

// 与上面预览图片json数据组对应的config数据

var preConfigList = new Array();

for ( var i = 0; i < reData.length; i++) {

var array_element = reData[i];

var tjson = {caption: array_element.fileIdFile.fileName, // 展示的文件名

width: '120px',

url: '/eim/project/deleteFile.do', // 删除url

key: array_element.id, // 删除是Ajax向后台传递的参数

extra: {id: 100}

};