Bootstrap中的fileinput 多圖片上傳及編輯功能
更新時(shí)間：2016年09月05日 11:59:07 作者：前塵憶夢(mèng)
這篇文章主要介紹了Bootstrap中的fileinput 多圖片上傳及編輯功能的實(shí)現(xiàn),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
大家如果對(duì)Bootstrap-fileinput 的配置不清楚的話，大家可以查看官方網(wǎng)站：http://plugins.krajee.com/file-input。
邏輯說明：先從后臺(tái)獲取數(shù)據(jù)展示，然后進(jìn)行編輯。
廢話不多說， 直接上代碼.
1. 頁面部分代碼：
<div class="form-group"> <label for="inputEmail3" class="col-xs-3 control-label">項(xiàng)目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()為我業(yè)務(wù)需要， 上傳完成后自動(dòng)執(zhí)行一個(gè)添加事件。 此方法可以去掉。
2. 獲取初始化數(shù)據(jù)方法：
// 初始化獲取原有文件
$(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('操作失??！');
}
});
});
說明：此處我返回是一個(gè) 對(duì)象數(shù)組：List<MemberUser>，可以理解為獲取一個(gè)班中所有的學(xué)生，展示頭像
3.初始化bootstrap-fileinput 組件：
function showPhotos(djson){
//后臺(tái)返回json字符串轉(zhuǎn)換為json對(duì)象
var reData = eval(djson);
// 預(yù)覽圖片json數(shù)據(jù)組
var preList = new Array();
for ( var i = 0; i < reData.length; i++) {
var array_element = reData[i];
// 此處指針對(duì).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;
// 與上面 預(yù)覽圖片json數(shù)據(jù)組 對(duì)應(yīng)的config數(shù)據(jù)
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向后臺(tái)傳遞的參數(shù)
extra: {id: 100}
};
preConfigList[i] = tjson;
}
// 具體參數(shù)自行查詢
$('#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: "選擇上傳的文件數(shù)量 超過允許的最大數(shù)值！",
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) {
//文件上傳成功后返回的數(shù)據(jù)， 此處我只保存返回文件的id
var result = outData.response.id;
// 對(duì)應(yīng)的input 賦值
$('#htestlogo').val(result).change();
});
}
4. 后臺(tái)java保存文件部分代碼
@RequestMapping(value="/uploadFile",method=RequestMethod.POST)
@ResponseBody
public Object uploadFile(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//轉(zhuǎn)型為MultipartHttpServletRequest
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
//獲取文件到map容器中
Map<String,MultipartFile> fileMap = multipartRequest.getFileMap();
//獲取頁面?zhèn)鬟f過來的路徑參數(shù)
folderPath = request.getParameter("folder");
String rootPath = BaseConfig.uploadPath;
String filePath = rootPath + folderPath+"/";
//文件上傳并返回map容器，map存儲(chǔ)了文件信息
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;
}
說明：該段代碼為獲取上傳文件的部分信息， 如文件名，上傳的路徑 等，將文件信息保存到表中，對(duì)應(yīng)對(duì)象為 FileModel 。
5.上傳完成后重新刷新該組件即可。
最終展示效果 ：
說明：此處指針對(duì)txt文件類型判斷， 其余的doc，ppt里面有對(duì)應(yīng)的展示圖標(biāo)，只須在判斷是添加對(duì)應(yīng)樣式即可
附：根據(jù)路徑過去/下載文件代碼：
/**
* 文件下載
*
* @param savePath
* 保存目錄
* @param name
* 文件原名
* @param file
* 保存時(shí)的名稱 包含后綴
* @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");
// 根據(jù)不同瀏覽器 設(shè)置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/*"); // 設(shè)置返回的文件類型
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){
//上傳文件
//附件模型對(duì)象
FileModel fm=new FileModel();
try {
File file = new File(savePath);
//判斷文件夾是否存在,如果不存在則創(chuàng)建文件夾
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作為保存時(shí)的文件名
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 多圖片上傳編輯，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Bootstrap Fileinput文件上傳組件用法詳解
- JS文件上傳神器bootstrap fileinput詳解
- Bootstrap fileinput文件上傳預(yù)覽插件使用詳解
- Bootstrap的fileinput插件實(shí)現(xiàn)多文件上傳的方法
- bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳
- 基于bootstrap的上傳插件fileinput實(shí)現(xiàn)ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽)
- 詳解bootstrap-fileinput文件上傳控件的親身實(shí)踐
- Bootstrap fileinput 上傳新文件移除時(shí)觸發(fā)服務(wù)器同步刪除的配置
- BootStrap fileinput.js文件上傳組件實(shí)例代碼
- Bootstrap FileInput實(shí)現(xiàn)圖片上傳功能
相關(guān)文章
JavaScript延時(shí)效果比較不錯(cuò)的...2007-08-08
bootstrap daterangepicker雙日歷時(shí)間段選擇控件詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap daterangepicker雙日歷時(shí)間段選擇控件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
關(guān)于js二維數(shù)組和多維數(shù)組的定義聲明(詳解)
下面小編就為大家?guī)硪黄P(guān)于js二維數(shù)組和多維數(shù)組的定義聲明(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
JavaScript操作XML/HTML比較常用的對(duì)象屬性集錦
本文給大家介紹javascript操作xml/html比較常用的對(duì)象屬性，涉及到j(luò)s對(duì)象屬性相關(guān)知識(shí)，對(duì)JavaScript操作XML/HTML比較常用的對(duì)象屬性感興趣的朋友可以參考下本文2015-10-10
本篇文章主要介紹了通過JS來判斷頁面控件是否獲取焦點(diǎn)的方法。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
Mysql內(nèi)儲(chǔ)存JSON字符串根據(jù)條件進(jìn)行查詢
本文主要介紹了Mysql內(nèi)儲(chǔ)存JSON字符串根據(jù)條件進(jìn)行查詢，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
JavaScript使用面向?qū)ο髮?shí)現(xiàn)的拖拽功能詳解
這篇文章主要介紹了JavaScript使用面向?qū)ο髮?shí)現(xiàn)的拖拽功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript基于面向?qū)ο蟮耐献Чδ軐?shí)現(xiàn)思路、原理與具體操作技巧,需要的朋友可以參考下2019-06-06
js實(shí)現(xiàn)在字符串中提取數(shù)字。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
JS實(shí)現(xiàn)網(wǎng)頁右側(cè)帶動(dòng)畫效果的伸縮窗口代碼
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁右側(cè)帶動(dòng)畫效果的伸縮窗口代碼,通過JavaScript基于時(shí)間函數(shù)實(shí)現(xiàn)頁面元素樣式漸變效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
在JavaScript中,遍歷集合（如數(shù)組、對(duì)象、Map和Set等）有多種方式,下面給大家分享幾種常用的方法來講解Javascript中如何循環(huán),感興趣的朋友一起看看吧2025-04-04