Bootstrap中的fileinput 多图片上传及编辑功能
发布时间：2020-12-18 00:49:57 所属栏目：安全 来源：网络整理
导读：大家如果对Bootstrap-fileinput 的配置不清楚的话，大家可以查看官方网站：。 逻辑说明：先从后台获取数据展示，然后进行编辑。 废话不多说， 直接上代码. 1. 页面部分代码： 说明： 其中onchange()为我业务需要， 上传完成后自动执行一个添加事件。 此方法
|
大家如果对Bootstrap-fileinput 的配置不清楚的话，大家可以查看官方网站：。 逻辑说明：先从后台获取数据展示，然后进行编辑。 废话不多说， 直接上代码. 1. 页面部分代码：说明： 其中onchange()为我业务需要， 上传完成后自动执行一个添加事件。 此方法可以去掉。 2. 获取初始化数据方法：说明：此处我返回是一个 对象数组：List 3.初始化bootstrap-fileinput 组件：0){
// 非图片类型的展示
preList[i]= "
 ',allowedPreviewTypes: ['image'],previewFileIconSettings: {
'docx': '','xlsx': '','pptx': '','pdf': '','zip': '','sql': '',},initialPreviewConfig: preConfigList
}).off('filepreupload').on('filepreupload',function() {
// alert(data.url);
}).on("fileuploaded",function(event,outData) {
//文件上传成功后返回的数据， 此处我只保存返回文件的id
var result = outData.response.id;
// 对应的input 赋值
$('#htestlogo').val(result).change();
});
}
4. 后台java保存文件部分代码 fileMap = multipartRequest.getFileMap();
//获取页面传递过来的路径参数
folderPath = request.getParameter("folder");
String rootPath = BaseConfig.uploadPath;
String filePath = rootPath + folderPath+"/";
//文件上传并返回map容器，map存储了文件信息
FileModel fileModel = UploadifyUtils.uploadFiles(filePath,fileMap);
boolean flag = service.add(fileModel);
if(flag){
String result = fileModel.getId()+";"+fileModel.getFilePath()+";"+fileModel.getName()+";"+fileModel.getFilePath();
Map map = new HashMap<>();
map.put("id",fileModel.getId());
//返回文件保存ID
//response.getWriter().write(map);
return map;
}
return null;
}
说明：该段代码为获取上传文件的部分信息， 如文件名，上传的路径 等，将文件信息保存到表中，对应对象为 FileModel 。 5.上传完成后重新刷新该组件即可。最终展示效果 ： 说明：此处指针对txt文件类型判断， 其余的doc，ppt里面有对应的展示图标，只须在判断是添加对应样式即可 附：根据路径过去/下载文件代码： 附： UploadifyUtils.uploadFiles 部分代码 fiLeMap){
//上传文件
//附件模型对象
FileModel fm=new FileModel();
try {
File file = new File(savePath);
//判断文件夹是否存在,如果不存在则创建文件夹
makeDir(file);
if(fiLeMap!=null){
for(Map.Entry
以上所述是小编给大家介绍的Bootstrap中的fileinput 多图片上传编辑。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |