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


Posted in Javascript onSeptember 05, 2016

大家如果对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, 
initialPreviewShowDelete:true, 
msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值!", 
initialPreview: previewJson, 
previewFileIcon: '<i class="fa fa-file"></i>', 
allowedPreviewTypes: ['image'], 
previewFileIconSettings: { 
'docx': '<i class="fa fa-file-word-o text-primary"></i>', 
'xlsx': '<i class="fa fa-file-excel-o text-success"></i>', 
'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>', 
'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>', 
'zip': '<i class="fa fa-file-archive-o text-muted"></i>', 
'sql': '<i class="fa fa-file-word-o text-primary"></i>', 
}, 
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保存文件部分代码

@RequestMapping(value="/uploadFile",method=RequestMethod.POST) 
@ResponseBody 
public Object uploadFile(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
//转型为MultipartHttpServletRequest 
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request; 
//获取文件到map容器中 
Map<String,MultipartFile> 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.上传完成后重新刷新该组件即可。

最终展示效果 :

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

说明:此处指针对txt文件类型判断, 其余的doc,ppt里面有对应的展示图标,只须在判断是添加对应样式即可

附:根据路径过去/下载文件代码:

/** 
* 文件下载 
* 
* @param savePath 
* 保存目录 
* @param name 
* 文件原名 
* @param file 
* 保存时的名称 包含后缀 
* @param request 
* @param response 
* @return 
*/ 
public static String down(String savePath, String name, String fileName, HttpServletRequest request, 
HttpServletResponse response) { 
try { 
String path = savePath + "/" + name; 
File file = new File(path); 
if (!file.exists()) { 
// 不存在 
request.setAttribute("name", fileName); 
return "download_error";// 返回下载文件不存在 
} 
response.setContentType("application/octet-stream"); 
// 根据不同浏览器 设置response的Header 
String userAgent = request.getHeader("User-Agent").toLowerCase(); 
if (userAgent.indexOf("msie") != -1) { 
// ie浏览器 
// System.out.println("ie浏览器"); 
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(name, "utf-8")); 
} else { 
response.addHeader("Content-Disposition", 
"attachment;filename=" + new String(name.getBytes("utf-8"), "ISO8859-1")); 
} 
response.addHeader("Content-Length", "" + file.length()); 
// 以流的形式下载文件 
InputStream fis = new BufferedInputStream(new FileInputStream(path)); 
byte[] buffer = new byte[fis.available()]; 
fis.read(buffer); 
fis.close(); 
//response.setContentType("image/*"); // 设置返回的文件类型 
OutputStream toClient = response.getOutputStream(); 
OutputStream bos = new BufferedOutputStream(toClient); 
//BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(bos)); 
bos.write(buffer); 
//bw.close(); 
bos.close(); 
toClient.close(); 
return null; 
} catch (Exception e) { 
e.printStackTrace(); 
//response.reset(); 
return "exception";// 返回异常页面 
} finally { 
/* if (toClient != null) { 
try { 
toClient.close(); 
} catch (IOException e) { 
e.printStackTrace(); 
} 
}*/ 
} 
}

附:

UploadifyUtils.uploadFiles 部分代码

public static FileModel uploadFiles(String savePath,Map<String,MultipartFile> fiLeMap){ 
//上传文件 
//附件模型对象 
FileModel fm=new FileModel(); 
try { 
File file = new File(savePath); 
//判断文件夹是否存在,如果不存在则创建文件夹 
makeDir(file); 
if(fiLeMap!=null){ 
for(Map.Entry<String, MultipartFile> entity:fiLeMap.entrySet()){ 
MultipartFile f = entity.getValue(); 
if(f!=null&&!f.isEmpty()){ 
String uuid=UploadifyUtils.getUUID();//uuid作为保存时的文件名 
String ext=UploadifyUtils.getFileExt(f.getOriginalFilename());//获取文件后缀 
//保存文件 
File newFile = new File(savePath+"/"+uuid+"."+ext); 
f.transferTo(newFile); 
fm.setFileName(f.getOriginalFilename()); 
fm.setName(uuid+"."+ext); 
fm.setFilePath(savePath);//保存路径 
fm.setExt(ext); 
fm.setSize(f.getSize()); 
} 
} 
} 
return fm; 
}catch (Exception e) { 
log.error(e); 
return null; 
} 
}

以上所述是小编给大家介绍的Bootstrap中的fileinput 多图片上传编辑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery截取中文字符串的实现代码
Dec 22 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
vue debug 二种方法
Sep 16 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 #Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 #Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 #Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 #Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 #Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 #Javascript
Bootstrap使用基础教程详解
Sep 05 #Javascript
You might like
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
用Python实现读写锁的示例代码
2018/11/05 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
应届大学生求职的自我评价
2013/11/17 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
入党转正申请报告
2015/05/15 职场文书
小学四年级作文之写景
2019/08/23 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
JVM钩子函数的使用场景详解
2021/08/23 Java/Android