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

大家如果对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.上传完成后重新刷新该组件即可。

最终展示效果 ：

说明：此处指针对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 多图片上传编辑，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！