【bootstrap-fileinput】前后台完整示例

2018年03月01日 17:34:50

阅读数：2672

效果图：

HTML:


<link rel="stylesheet" type="text/css" href="css/fileinput.min.css"/>

<script type="text/javascript" src="js/fileinput.min.js"></script>
<script type="text/javascript" src="js/zh.js"></script>
<div class="modal-body">
<a href="" class="form-control" style="border:none;">下载模板</a>
<input type="file" name="reportFile" id="reportFile" multiple class="file-loading" />
</div>

JS:

//初始化fileinput
var oFileInput = new FileInput();
//参数1:控件id、参数2:上传地址
oFileInput.Init("reportFile", "/report/uploadReport");

//初始化fileinput
var FileInput = function () {
var oFile = new Object();
//初始化fileinput控件（第一次初始化）
oFile.Init = function(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
//初始化上传控件的样式
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png', 'pdf'], //接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: false, //是否显示标题
browseClass: "btn btn-primary", //按钮样式
//dropZoneEnabled: false, //是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50, //图片的最小高度
//maxImageWidth: 1000, //图片的最大宽度
//maxImageHeight: 1000, //图片的最大高度
//maxFileSize: 0, //单位为kb，如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
uploadExtraData:function (previewId, index) { //传参
var data = {
"reportGroupId": $('#lbl_groupId').html(), //此处自定义传参
};
return data;
}
});
//导入文件上传完成之后的事件
$("#reportFile").on("fileuploaded", function (event, data, previewId, index) {
//报告table刷新
showDataGrid_report($('#lbl_groupId').html());
});
}
return oFile;
};

JAVA:

/**
* 报告上传
* */
@RequestMapping(value = "/uploadReport", method = RequestMethod.POST)
public ApiResponse uploadReport(HttpServletRequest request, HttpServletResponse response) {
Map<String, Object> result = new HashMap<String, Object>();
//获取参数
String reportGroupId = getParam(request, "reportGroupId");
//调用通用接口上传文件
result = uploadFile(request, "reportFile", reportGroupId);
ApiResponse ret = new ApiResponse();
ret.setMap(result);
return ret;
}
/**
* 上传文件通用接口
*
* @param request 请求体
* @param dstFileName html上传组件中(input中name属性)，上传文件体名称，通过此名称获取所有上传的文件map
* @param reportGroupId （特殊）上传报告所述报告组id
* */
protected Map<String, Object> uploadFile(HttpServletRequest request, String dstFileName, String reportGroupId) {
Map<String, Object> ret = new HashMap<String, Object>();
//判断保存文件的路径是否存在
File fileUploadPath = new File(FILE_UPLOAD_PATH);
if (!fileUploadPath.exists()) {
fileUploadPath.mkdir();
}
if (ServletFileUpload.isMultipartContent(request)) {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
List<MultipartFile> fileList = multipartRequest.getFiles(dstFileName);
for (MultipartFile item : fileList) {
String fileName = ""; //当前上传文件全名称
String fileType = ""; //当前上传文件类型
String saveFileName = ""; //保存到服务器目录的文件名称
String reportAddr = ""; //保存到服务器目录的文件全路径
try {
fileName = item.getOriginalFilename();
fileType = item.getContentType();
saveFileName = getCurrentTime("yyyyMMddHHmmss") + "_" + fileName;
reportAddr = fileUploadPath + "/" + saveFileName;
reportAddr = reportAddr.replace("/", File.separator).replace("\\", File.separator);
File savedFile = new File(fileUploadPath, saveFileName);
item.transferTo(savedFile);
//上传文件成功，保存文件信息到表reportDetail
Map<String, Object> param = new HashMap<String, Object>();
param.put("reportGroupId", reportGroupId);
param.put("reportName", fileName);
param.put("reportType", fileType);
param.put("reportAddr", reportAddr);
param.put("createTime", getCurrentTime("yyyy-MM-dd HH:mm:ss"));
param.put("lastOper", "xxxxxxx");
ApiResponse r = (ApiResponse) saveEntity("/report/saveReportDetail", param, ApiResponse.class);
if (r.getCode() == 0) {
ret.put("success", true);
} else {
ret.put("success", false);
ret.put("message", r.getMessage());
}
} catch (Exception e) {
logger.error(e.getMessage());
ret.put("success", false);
ret.put("message", e.getMessage());
}
}
}
return ret;
}

PS：后台接收文件时用了for循环，其实bootstrap-fileinput插件在多文件上传时，是采用多次调用'uploadUrl'实现文件上传，所以当前for循环只执行了一遍。然后返回结果给页面，页面对当前文件上传状态做处理。

秒客网

【bootstrap-fileinput】前后台完整示例

【bootstrap-fileinput】前后台完整示例

相关文章