Layui樣式：
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="common/header::copy"></head>
<style type="text/css">
#demo2 > img {
width: 33%;
height: 115px;
}
#demo1 {
width: 100%;
height: 270px;
}
</style>
<body class="layui-layout-body" style="overflow: auto;">
<div class="layui-container">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">標題</label>
<div class="layui-input-block">
<input name="title" lay-verify="title" autocomplete="off" placeholder="請輸入標題" class="layui-input" type="text">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">內容</label>
<div class="layui-input-block">
<textarea placeholder="請輸入內容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">封面圖</label>
<div class="layui-input-block" id="test1" style="border: 1px solid #9F9F9F;">
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
</div>
</div>
<input type="hidden" name="lImage" value="" >
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">附加圖片</label>
<div class="layui-input-block" id="test2">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
預覽圖(可上傳多張)：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">立即重置</button>
</div>
</div>
</form>
</div>
</body>
<script type="text/javascript" data-th-inline="javascript">
layui.use(['form', 'layedit', 'upload'], function() {
var form = layui.form
, layer = layui.layer
, laydate = layui.laydate
, $ = layui.jquery
, upload = layui.upload;
//普通圖片上傳
var uploadInst = upload.render({
elem: '#test1'
,url: '/invitation/upload_one/'
,before: function(obj){
//預讀本地文件示例，不支持ie8
obj.preview(function(res, file, result){
$('#demo1').attr('src', result); //圖片鏈接（base64）
});
}
,done: function(res){
//如果上傳失敗
if(res.code == 200){
return layer.msg('上傳失敗');
}
// 將數據放到input框中
$("input[name='lImage']").val(res.extend.msg);
}
});
//多圖片上傳 （其實也是一個單文件上傳）
upload.render({
elem: '#test2'
,url: '/invitation/upload_one/'
,multiple: true
,before: function(obj){
//預讀本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
});
}
,done: function(res){
//上傳完畢
console.log(res);
$("#demo2").append('<input type="hidden" name="add_pic" value="'+ res.extend.msg +'"/>');
}
});
})
</script>
</html>控制器
/**
* @function 單文件上傳
* @param file
* @return
*/
@PostMapping("/upload_one")
@ResponseBody
public Msg UploadImage(@RequestParam(value = "file", required = false) MultipartFile file){
if(file == null){
return Msg.fail().add("msg", "圖片上傳失敗！");
}else{
String end = FileUpload.fileOne(file, StaticUtil.SAVE_URL, StaticUtil.FILE_TYPE);
return Msg.success().add("msg", end);
}
}工具類使用
/**
* @function 單文件上傳
* @return
*/
public static String fileOne(MultipartFile file, String saveUrl, String fileType){
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
String fileName = UUID.randomUUID() + suffix;
String newUrl = saveUrl+"\\"+now()+"\\"+"cover\\"+fileName;
System.out.println("文件路徑：" + newUrl);
String[] type_array = fileType.split(",");
System.out.println("type : "+type_array.length);
File saveFile = new File(newUrl);
if(!saveFile.getParentFile().exists()){
saveFile.getParentFile().mkdirs();
}
try {
file.transferTo(saveFile);
} catch (IOException e) {
e.printStackTrace();
return "上傳失敗！";
}
return newUrl;
}靜態變量類
public class StaticUtil {
public static final String SAVE_URL = "E:\\images";
public static final String FILE_TYPE = "jpeg,jpg,png";
}設置tomcat的訪問路徑
最好不要將圖片和一些文件放在Tomcat的服務器目錄下， 重啓就什麼也沒有了。
在server.xml文件中找到 host 內，添加
<Context path="/demo/image" docBase="D:\demo\File\image"></Context>當你訪問http://localhost:8080/demo/image/xxx.jpg 的時候，tomcat就會把請求轉發，去請求tomcat所在的物理機上的D盤下D:\demo\File\file下的xxx.zip文件和xxx.jpg文件
當文件上傳的時候只需要把相應的文件存放到相應的目錄中在數據庫中存放文件的路徑：
這裏最好在數據庫中存放xxx.zip 或者xxxx.jpg這樣的文件名
多文件上傳
/**
* @function 多文件上傳
* @param files
* @return
*/
@PostMapping("/upload_many")
@ResponseBody
public Msg UploadImages(@RequestParam(value = "file", required = false) MultipartFile[] files){
if(files.length == 0){
return Msg.fail().add("msg", "圖片爲空！");
}else{
List<String> lists = FileUpload.fileMany(files, StaticUtil.SAVE_URL, StaticUtil.FILE_TYPE);
return Msg.success().add("msg", lists);
}
}/**
* @function 多文件上傳
* @return
*/
public static List<String> fileMany(MultipartFile[] files , String saveUrl, String fileType){
List<String> picUrl = null;
String newUrl = saveUrl + "\\" + now() + "\\pic\\";
File saveDir = new File(newUrl);
if(!saveDir.exists()){
saveDir.mkdirs();
}
for(MultipartFile file : files){
if(file != null){
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
String fileName = UUID.randomUUID() + suffix;
String newFileUrl = newUrl+fileName;
File saveFile = new File(newFileUrl);
try {
file.transferTo(saveFile);
picUrl.add(newFileUrl);
} catch (IOException e) {
e.printStackTrace();
System.out.println("上傳失敗");
}
}
}
return picUrl;
}有錯誤歡迎指正，感謝！