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.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
javascript的push使用指南
Dec 05 Javascript
深入理解js promise chain
May 05 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 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_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
Python代码的打包与发布详解
2014/07/30 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
django基础学习之send_mail功能
2019/08/07 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
python实现用户名密码校验
2020/03/18 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
英语专业毕业生自荐信
2013/10/28 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
给校长的建议书400字
2014/05/15 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
关于远足的感想
2015/08/10 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js