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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
详解ES6 系列之异步处理实战
Oct 26 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 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 ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
Redis构建分布式锁
2017/03/28 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
如何更优雅地写python代码
2019/07/02 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
伊索寓言教学反思
2014/05/01 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
人与自然观后感
2015/06/16 职场文书
工伤调解协议书
2016/03/21 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers