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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
firefox下frameset取不到值的解决方法
Sep 06 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
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基础知识:控制结构
2006/12/13 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
项目实践之javascript技巧
2007/12/06 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python使用分治法实现求解最大值的方法
2015/05/12 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
超简单的Python HTTP服务
2019/07/22 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
市三好学生主要事迹
2014/01/28 职场文书
创新型城市实施方案
2014/03/06 职场文书
2014年会计工作总结
2014/11/27 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python