Controller
@RequestMapping("/admin/toSaveMaterial")
@ResponseBody
public ResultInfo saveMaterial(Article article, MultipartHttpServletRequest request)
throws IOException{
return materialService.saveMaterial(article,request);
}
ServiceImpl
public ResultInfo<Article> saveMaterial(Article article, MultipartHttpServletRequest request)
throws IOException {
ResultInfo resultInfo = new ResultInfo();
try {
if (article.getReleaseTime() == null) {
article.setReleaseTime(new Date());
}
article.setId(ArticleState.id.toString());
article.setUpdateTime(new Date());
articleDao.saveAndFlush(article);
ArticleState.id++;
Iterator<String> fileNames = request.getFileNames();
while (fileNames.hasNext()) {
//request.getFiles(fileName)方法即通过fileName这个Key, 得到对应的文件
//集合列表. 只是在这个Map中, 文件被包装成MultipartFile类型
String fileName = fileNames.next();
System.out.println(fileName);
List<MultipartFile> files = request.getFiles(fileName);
if (files.size()> 0) {
for (MultipartFile multipartFile : files) {
Material resource = new Material();
//获得文件原本的名字
String originalFilename = multipartFile.getOriginalFilename();
//获得原本文件类型(eg:.doc)
String type = originalFilename.substring(originalFilename.lastIndexOf("."));
String newName = UUID.randomUUID().toString() + type;
File path=new File(ResourceUtils.getURL("classpath:").getPath());
File upload=new File(path.getAbsolutePath(),"static/successImage/content/");
if (!upload.exists()) upload.mkdirs();
String uploadPath = upload + "\\";
File file = new File(uploadPath + newName);
System.out.println(uploadPath+newName);
//将文件写入磁盘
multipartFile.transferTo(file);
//设置资源url
resource.setFilePath("/static/successImage/content/"+newName);
//设置资源类型
resource.setMaterialType(type.substring(1));
//设置资源所属文章
resource.setArticleId(article.getId());
resource.setId(UUIDUtils.getUUID());
//设置资源名称
resource.setMaterialName(originalFilename);
materialDao.save(resource);
resultInfo.setResultCode(ResultInfo.RESULT_CODE_SUCCESS);
}
}
}
} catch (Exception e) {
e.printStackTrace();
TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();
resultInfo.setResultCode(ResultInfo.RESULT_CODE_ERROR);
}
return resultInfo;
}
ftl
<html class="x-admin-sm">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传材料</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="${request.contextPath}/static/admin/xadmin/css/font.css">
<link rel="stylesheet" type="text/css"
href="${request.contextPath}/static/admin/lib/editor_md/css/editormd.min.css">
<link rel="stylesheet" type="text/css"
href="${request.contextPath}/static/admin/lib/editor_md/css/editormd.preview.min.css">
<link rel="stylesheet" href="${request.contextPath}/static/admin/xadmin/css/xadmin.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/admin/xadmin/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${request.contextPath}/static/admin/xadmin/js/xadmin.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/admin/xadmin/js/cookie.js"></script>
<#--<link rel="stylesheet" href="${request.contextPath}/static/admin/css/side.css"/>-->
<link rel="stylesheet" href="${request.contextPath}/static/admin/css/pintuer.css"/>
<script type="text/javascript" class="library" src="${request.contextPath}/static/admin/js/jquery.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/admin/js/pintuer.js"></script>
<#--引入alert的css文件-->
<link href="${request.contextPath}/static/admin/css/alert.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="x-nav">
<span class="layui-breadcrumb">
<a href="">首页</a>
<#--<a href="">演示</a>-->
<a>
<cite>资料上传</cite></a>
</span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
<div class="main">
<div class="panel">
<div class="panel-body">
<form id="commentForm">
<div class="form-group">
<table class="table table-responsive">
<tr>
<td>材料标题</td>
<td>
<input type="text" style="width: 735px;" name="title" class="input input-small required">
</td>
</tr>
<tr>
<td>副标题</td>
<td><input type="text" style="width: 735px;" name="subtitle" id="subtitle" class="input input-small"></td>
</tr>
<tr>
<td><input type="checkbox">上传资料</td>
<td><input type="file" name="file" id="fileId" style="width: 800px;" multiple required>
<#-- <button class="button">浏览-->
</td>
</tr>
</table>
<br/>
<div><label>>>材料介绍</label></div>
<br/>
<div id="my-editormd" class="editormd">
<textarea id="my-editormd-markdown-doc" class="editormd-markdown-textarea required"
name="content" style="display:none;" ></textarea>
<!-- 注意:name属性的值-->
<textarea class="editormd-html-textarea" id="my-editormd-html-code"
name="my-editormd-html-code" style="display:none;"></textarea>
</div>
<div id="app">
<table class="table table-responsive">
<tr>
<td>所属栏目:</td>
<td>
<select name="navigate" class="input input-small required" style="width: 150px;" >
<option value="70">人事管理</option>
<option value="71">人才引进</option>
<option value="72">师资职称</option>
<option value="73">劳资福利</option>
<option value="74">社会保险</option>
<option value="75">其他资料</option>
</select>
</td>
</tr>
<tr>
<td>添加日期:</td>
<td><input type="date" name="releaseTime" class="input input-small required" style="width: 150px;" ></td>
<td></td>
</tr>
<tr >
<td>新闻来源:</td>
<td>
<select name="source" class="input input-small required" style="width: 150px;" >
<option v-for="n in newsSource" v-bind:value="n.id">
{{n.name}}
</option>
</select>
</td>
</tr>
<tr>
<td>关键字:</td>
<td>
<select class="input input-small required" name="type" style="width: 150px;" >
<option v-for="t in type" v-bind:value="t.id">
{{t.name}}
</option>
</select>
</td>
</tr>
<tr>
<td>新闻作者:</td>
<td><input type="text" name="author" class="input input-small required" style="width: 150px;" required="required"></td>
<td></td>
</tr>
<tr>
<td>责任编辑:</td>
<td><input type="text" name="editor" class="input input-small required" style="width: 150px;"></td>
<#--<td>-->
<#--<select>-->
<#--<option></option>-->
<#--<option>admin</option>-->
<#--</select>-->
<#--</td>-->
</tr>
<#--<tr>-->
<#--<td>新闻模板:</td>-->
<#--<td>-->
<#--<select>-->
<#--<option>info.html</option>-->
<#--</select>-->
<#--</td>-->
<#--<td></td>-->
<#--</tr>-->
<#--<tr>-->
<#--<td>点击:</td>-->
<#--<td><input type="number" id="" name="click" required="required"></td>-->
<#--<td></td>-->
<#--</tr>-->
<input type="number" id="click" name="click" value="1" hidden>
<#--<tr>-->
<#--<td>点击:</td>-->
<#--<td><input type="number" id="" name="click" required="required"></td>-->
<#--<td></td>-->
<#--</tr>-->
<#--<tr>-->
<#--<td>可选属性:</td>-->
<#--<td>-->
<#--<input type="checkbox" name="1">头条-->
<#--<input type="checkbox" name="1">滚动-->
<#--<input type="checkbox" name="1">推荐-->
<#--<input type="checkbox" name="1">幻灯-->
<#--<input type="checkbox" name="1">置顶-->
<#--</td>-->
<#--<td></td>-->
<#--<td></td>-->
<#--</tr>-->
<tr>
<td>新闻摘要:</td>
<td colspan="3"><textarea class="input input-small" name="digest" placeholder="选填"></textarea></td>
<td></td>
</tr>
</table>
</div>
</div>
<div id="box">
<input type="button" class="button bg-main" onclick="submitForm()" value="提交">
</div>
</form>
<br/>
<hr/>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="${request.contextPath}/static/admin/js/jquery.js"></script>
<!-- content YDC end -->
<script type="text/javascript" src="${request.contextPath}/static/admin/js/nicEdit.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/admin/js/upImg.js"></script>
<script src="${request.contextPath}/static/admin/lib/editor_md/editormd.min.js"></script>
<script src="${request.contextPath}/static/admin/js/jquery.mloading.js"></script>
<script src="${request.contextPath}/static/admin/js/vue.min.js"></script>
<script type="text/javascript"
src="${request.contextPath}/static/admin/lib/vue_resource/dist/vue-resource.min.js"></script>
<#--引入alert-->
<script src="${request.contextPath}/static/admin/js/alert.js"></script>
<script type="text/javascript">
//格式化时间
function replaceTime(time){
return time.split(" ")[0];
}
jQuery(function () {
upload_start();
});
$(function () {
refreshStart();
//tab切换
$("#addNotice").addClass("active");
//加载编辑器
editormd("my-editormd", {//注意1:这里的就是上面的DIV的id属性值
width: "100%",
height: 800,
syncScrolling: "single",
path: "${request.contextPath}/static/admin/lib/editor_md/lib/",//注意2:你的路径
saveHTMLToTextarea: true,//注意3:这个配置,方便post提交表单
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "${request.contextPath}/admin/saveContentImg",//注意你后端的上传图片服务地址
});
loadData();
});
function loadData() {
//发送请求
$.ajax({
dataType: "JSON",
type: "POST",
url: "${request.contextPath}/admin/getNewsSourceAndTypeList",
success: function (result, state) {
console.log(result);
getVue(result, state);
//填充时间
<#--console.log( replaceTime("${article.releaseTime!}"))-->
<#--document.getElementById("releaseTime").value = replaceTime("${article.releaseTime!}");-->
refreshEnd();
},
error: function (result, state) {
// console.log(state);
console.log(result);
refreshEnd();
alertWarning("网络异常");
}
});
//刷新结束
refreshEnd();
}
//利用Vue填充信息
var v;
function getVue(r, s) {
if (v) {
v.$set(v.$data, "result", r);
v.$set(v.$data, "source", r.resultObj);
} else {
v = new Vue({
el: "#app",
//数据
data: {
//数据赋值操作
result: r,
//新闻来源
newsSource: r.resultObj[0],
//关键字
type: r.resultObj[1],
},
});
}
}
function refreshStart() {
$("body").mLoading({
text: "正在加载", //加载文字,默认值:加载中...
// icon: "", //加载图标,默认值:一个小型的base64的gif图片
html: false, //设置加载内容是否是html格式,默认值是false
content: "", //忽略icon和text的值,直接在加载框中显示此值
mask: true //是否显示遮罩效果,默认显示
});
}
//刷新结束
function refreshEnd() {
$("body").mLoading("hide");
}
</script>
<script type="text/javascript">
function submitForm(){
//判断表单字段是否为空
var list = document.getElementsByClassName("required");
for (var i = 0; i < list.length; i++) {
// alert(list[i].value=="");
if (list[i].value == ""||list[i].value == -1) {
alertWarning("表单字段不能为空");
return;
}
}
//判断是否上传文件
var fileSize = 0;
var objFile = document.getElementById("fileId");
if(objFile.value == "") {
alertWarning("上传文件不能为空");
return 0;
}else {
// alert(objFile.value)
fileSize=objFile.files[0].size
}
var size = fileSize / 1024;
//获取上传文件的大小,如果超过大小则提示,如果满足则上传
if(size>1000000){
// alert("附件不能大于10M");
alertWarning("附件不能大于10M");
}else {
var form = new FormData(document.getElementById("commentForm"));
$.ajax({
type: "POST",
url: "${request.contextPath}/admin/toSaveMaterial",
async: false,
contentType: false,//必须有 图片上传
processData: false,//必须有 图片上传
data: form,
success: function (result) {
if (result.resultCode == 1) {
alertWarning("保存成功!");
}
},
error: function () {
alertWarning("保存成功");
}
});
}
}
var warning;
//弹出窗口函数
function alertWarning(message) {
warning = jqueryAlert({
'content': message,
'modal': true,
'contentTextAlign': 'center',
'width': '450px',
'height': '100px',
'animateType': 'linear',
'buttons': {
'确定': function () {
warning.close();
<#--window.location.href="${request.contextPath}/admin/"-->
}
}
})
}
</script>
<script type="text/javascript">
</script>
</html>
<script>
$(".sidenav>li>a").click(function () {
$(this).addClass("hover");
$(this).next().slideToggle();
$(this).parent().siblings().children("a").removeClass("hover").next().slideUp();
})
</script>