没有合适的资源?快使用搜索试试~ 我知道了~
Bootstrap中的fileinput 多图片上传及编辑功能
12 下载量 79 浏览量
2020-09-01
17:15:05
上传
评论
收藏 100KB PDF 举报
温馨提示
试读
4页
主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能的实现,非常不错,具有参考借鉴价值,需要的朋友可以参考下
资源推荐
资源详情
资源评论
Bootstrap中的中的fileinput 多图片上传及编辑功能多图片上传及编辑功能
主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能的实现,非常不错,具有参考借鉴价值,需要的朋友可以参考下
大家如果对Bootstrap-fileinput 的配置不清楚的话,大家可以查看官方网站:http://plugins.krajee.com/file-input。
逻辑说明:先从后台获取数据展示,然后进行编辑。
废话不多说, 直接上代码.
1. 页面部分代码:页面部分代码:
<div class="form-group">
<label for="inputEmail3" class="col-xs-3 control-label">项目LOGO</label>
<div class="col-xs-7">
<input id="testlogo" type="file" name="icoFile" class="file-loading" />
<input type="text" name="htestlogo" id="htestlogo" onchange="addFile(this)" >
</div>
</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}
};
preConfigList[i] = tjson;
}
// 具体参数自行查询
$('#testlogo').fileinput({
uploadUrl: '/eim/upload/uploadFile.do',
uploadAsync:true,
showCaption: true,
showUpload: true,//是否显示上传按钮
showRemove: false,//是否显示删除按钮
showCaption: true,//是否显示输入框
showPreview:true,
showCancel:true,
dropZoneEnabled: false,
maxFileCount: 10,
资源评论
weixin_38552239
- 粉丝: 13
- 资源: 955
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功