组件遍历上传
一、前端
html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('修改固定资产信息')" />
<th:block th:include="include :: datetimepicker-css" />
<th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-gdzcxx-edit" th:object="${bizGdzcxx}">
<input name="gdzcxxId" th:field="*{gdzcxxId}" type="hidden">
<div class="form-group">
<label class="col-sm-3 control-label is-required">资产名称:</label>
<div class="col-sm-8">
<input name="zcmc" th:field="*{zcmc}" class="form-control" type="text" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">资产型号:</label>
<div class="col-sm-8">
<input name="zcxh" th:field="*{zcxh}" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">资产照片:</label>
<div class="col-sm-8">
<input type="text" name="zczp" th:field="*{zczp}">
<div class="file-loading">
<input class="form-control file-upload" id="zczp" name="file" type="file" multiple>
</div>
</div>
</div>
</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
var prefix = ctx + "biz/gdzcxx";
$("#form-gdzcxx-edit").validate({
focusCleanup: true
});
function submitHandler() {
if ($.validate.form()) {
$.operate.save(prefix + "/edit", $('#form-gdzcxx-edit').serialize());
}
}
$(".file-upload").each(function (i) {
var val = $("input[name='" + this.id + "']").val();
var preView = val.split(',');
$(this).fileinput({
'uploadUrl': ctx + 'common/upload',
initialPreviewAsData: true,
initialPreview: preView,
maxFileCount: 10,
maxFileSize: 1000,
autoReplace: true
}).on('fileuploaded', function (event, data, previewId, index) {
//多文件上传后,将文件名路径用","拼接起来
if(data.response.fileName){
var filenames = data.response.fileName;
var currentFilename = $("input[name='" + event.currentTarget.id + "']").val();
if(currentFilename!=''){
filenames = currentFilename +',' +filenames;
}
$("input[name='" + event.currentTarget.id + "']").val(filenames);
}
}).on('fileremoved', function (event, id, index) {
var fileIndex = index.replace('init-','');
var currentFilename = $("input[name='" + event.currentTarget.id + "']").val();
var fileNames = currentFilename.split(',');
var lastFileNames = '';
for(var i in fileNames){
if(i == parseInt(fileIndex)){
continue;
}
lastFileNames += fileNames[i]+',';
}
lastFileNames = lastFileNames.split(',').slice(0,-1).join(',');
$("input[name='" + event.currentTarget.id + "']").val(lastFileNames);
})
$(this).fileinput('_initFileActions');
});
</script>
</body>
</html>
二、后端
java
@Controller
@RequestMapping("/common")
public class CommonController
{
private static final Logger log = LoggerFactory.getLogger(CommonController.class);
@Autowired
private ServerConfig serverConfig;
/**
* 通用上传请求(单个)
*/
@PostMapping("/upload")
@ResponseBody
public AjaxResult uploadFile(MultipartFile file) throws Exception
{
try
{
// 上传文件路径
String filePath = "D:/upload";
// 上传并返回新文件名称
String fileName = FileUploadUtils.upload(filePath, file);
String url = serverConfig.getUrl() + fileName;
AjaxResult ajax = AjaxResult.success();
ajax.put("url", url);
ajax.put("fileName", fileName);
ajax.put("newFileName", FileUtils.getName(fileName));
ajax.put("originalFilename", file.getOriginalFilename());
return ajax;
}
catch (Exception e)
{
return AjaxResult.error(e.getMessage());
}
}
}
java
@Component
public class ServerConfig
{
/**
* 获取完整的请求路径,包括:域名,端口,上下文访问路径
*
* @return 服务地址
*/
public String getUrl()
{
HttpServletRequest request = ServletUtils.getRequest();
return getDomain(request);
}
public static String getDomain(HttpServletRequest request)
{
StringBuffer url = request.getRequestURL();
String contextPath = request.getServletContext().getContextPath();
return url.delete(url.length() - request.getRequestURI().length(), url.length()).append(contextPath).toString();
}
}