我正在开发一个 Springboot Web 应用程序，其中我有一个只接受.csv文件的输入字段。如果我们要传递任何其他文件，它应该在同一页面上抛出错误。如果通过CSV文件，那么我必须在HTML文件上显示文件的实时上传状态。
我已经开发了HTML页面，该页面将显示上传文件的进度状态，但是如果我传递任何其他格式文件，那么我正在后端进行验证。在控制器中，我正在检查文件是否是不同类型的，然后我正在发送模型属性消息，但我无法在 HTML 页面上获得该模型属性。但是，如果我删除正在检查上传文件进度的标签，则模型属性消息会显示该消息，没有任何问题。
首页.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('input:file').change(function() {
if ($(this).val()) {
$('button:submit').attr('disabled', false);
}
});
});
</script>
<script type="text/javascript">
$(function() {
$('button[type=submit]')
.click(
function(e) {
e.preventDefault();
$(this).prop('disabled', true);
var form = document.forms[0];
var formData = new FormData(form);
var ajaxReq = $
.ajax({
url : 'upload',
type : 'POST',
data : formData,
cache : false,
contentType : false,
processData : false,
xhr : function() {
var xhr = $.ajaxSettings.xhr();
xhr.upload.onprogress = function(
event) {
var perc = Math
.round((event.loaded / event.total) * 100);
$('#progressBar').text(
perc + '%');
$('#progressBar').css('width',
perc + '%');
};
return xhr;
},
});
});
});
</script>
</head>
<body>
<div class="container">
<hr>
<form action="upload" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>Select File</label> <input class="form-control" type="file"
name="file">
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit" disabled>Process
It</button>
</div>
</form>
<br />
<div class="progress">
<div id="progressBar" class="progress-bar progress-bar-success"
role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100" style="width: 0%">0%</div>
</div>
<h3 th:text="${message}" style="color: rgb(255, 0, 0);"></h3>
</div>
</body>
</html>
上面是我的HTML文件，下面是我的控制器。
@Controller
public class TestController {
@RequestMapping(value="/upload")
public String process(@RequestParam("file") MultipartFile file , Model model) throws Exception {
String fileName = file.getOriginalFilename().toLowerCase();
if(fileName.contains(".csv") == false) {
model.addAttribute("message", "Only .csv is acceptable");
return "home";
}
return "success";
}
}
如果在同一 HTML 页面上传递了任何不正确的文件格式，我也想显示错误消息。基本上，如果 Post 调用中返回任何内容，我想在同一页面上实现/打印错误或成功消息。如果我能得到任何帮助，那将非常有帮助。
您可以将处理程序分配给您的帖子调用：
var ajaxReq = $.post( "upload", function(){
// add all your success logic here
})
.fail(function() {
// add all your error logic here
});
请注意，您的后端会检查字符串".csv"是否存在，但您应该知道有人可以上传这样的文件："file.csv.malware.exe"。endsWith(( 方法似乎更合适。