<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<title>文件上传</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="shortcut icon" th:href="@{/img/favicon.ico}" href="../static/img/favicon.ico" type="image/x-icon"/>
<!-- bootstrap3.3.0 -->
<link rel="stylesheet" href="/bootstrap/3.3.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/bootstrap/3.3.0/css/bootstrap-theme.min.css"/>
<link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<link hrel="stylesheet" href="/css/bootstrap-treeview.min.css"/>
<link href="/css/fileinput.css" rel="stylesheet"/>
<link href="/css/toastr.min.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-treeview.min.js"></script>
<body style="padding-top: 70px;">
<div class="container" id="edit_actor">
<div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="panel-body">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-primary">
<div class="panel-heading" role="tab" id="headingEight">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion"
href="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
文件上传
</a>
</h4>
</div>
<div class="panel-body">
<div class="form-group">
<form class="form-horizontal col-sm-8" role="form">
<div class="form-group">
<label for="category" >类型:</label>
<input id="category" type="cat" class="form-control" placeholder="NETWORK_DRAMA"/>
</div>
<div class="form-group">
<label for="sheet-id" >下标:</label>
<input id="sheet-id" class="form-control" placeholder="0"/>
</div>
<div class="form-group">
<label for="path" >路径:</label>
<input id="path" class="form-control" placeholder="上传路径"/>
</div>
<div class="form-group">
<form id="form" action="/fileUpload" method="post" enctype="multipart/form-data">
<div class="row form-group">
<label class="col-md-4">文件上传:</label>
<div class="col-sm-12">
<input id="input-id" name="uploadFile" type="file" multiple
class="file-loading" data-show-caption="true">
</div>
</div>
</form>
</div>
<div class="form-group">
<button id="add_excel_info" type="button" class="btn btn-default"> 确定 </button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" id="csrf" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
</div>
<script src="/js/vue.js" type="application/javascript"></script>
<script src="/js/plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="/js/fileinput.js"></script>
<script type="text/javascript" src="/js/fileinput_locale_zh.js"></script>
<script type="text/javascript" src="/js/uploadFile.js"></script>
</body>
</html>
JS
$(function () {
initFileInput("input-id");
})
function initFileInput(ctrlName) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
// uploadUrl: "/fileUpload?_csrf=" + $('#csrf').val(), //上传的地址
uploadUrl: "/uploadFile?_csrf=" + $('#csrf').val(), //上传的地址
allowedFileExtensions: ['xls', 'xlsx'],//接收的文件后缀
uploadAsync: true, //默认异步上传
showUpload: true, //是否显示上传按钮
showRemove: true, //显示移除按钮
showPreview: true, //是否显示预览
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
enctype: 'multipart/form-data',
validateInitialCount: true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
}).on('filepreupload', function (event, data, previewId, index) { //上传中
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
console.log('文件正在上传');
}).on("fileuploaded", function (event, data, previewId, index) { //一个文件上传成功
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
var res = data.response;
$("#path").val(res)
console.log("文件上传成功")
}).on('fileerror', function (event, data, msg) { //一个文件上传失败
console.log('文件上传失败!' + data.id);
})
}
$("#add_excel_info").click(function () {
var category = $("#category").val();
var sheet_id = $("#sheet-id").val();
var path = $("#path").val();
$.ajax({
url: '/',
type: 'GET',
// headers: {'Content-Type': 'application/json'},
data: {
xxxxx
},
success: function (data) {
alert("添加成功!");
get_magazine_awards();
}
});
});
Controller
@RequestMapping("/fileUpload")
@ResponseBody
public String fileUpload(HttpServletRequest request,@RequestParam(value = "uploadFile") MultipartFile uploadFile) throws IOException {
if(uploadFile.isEmpty()){
return "false";
}
String fileName = uploadFile.getOriginalFilename();
String path = "F:\\";
File dest = new File(path + "/" + fileName);
if(!dest.getParentFile().exists()){ //判断文件父目录是否存在
dest.getParentFile().mkdir();
}
try {
uploadFile.transferTo(dest); //保存文件
return path;
} catch (Exception e) {
e.printStackTrace();
return "false";
}
}