gpt4 book ai didi

javascript - 如果在 html 中启用了 javascript,则无法获取 Controller 模型属性

转载 作者:行者123 更新时间:2023-12-02 01:33:44 25 4
gpt4 key购买 nike

我正在开发一个 Springboot Web 应用程序,其中有一个仅接受 .csv 文件的输入字段。如果我们传递任何其他文件,它应该在同一页面上抛出错误。如果 CSV 文件通过,那么我必须在 HTML 文件上显示文件的实时上传状态。

我已经开发了 HTML 页面,它将显示上传文件的进度状态,但如果我传递任何其他格式文件,那么我将在后端进行验证。在 Controller 中,我检查文件是否是不同类型,然后发送模型属性消息,但我无法在 HTML 页面上获取该模型属性。但是,如果我删除检查上传文件进度的标签,则模型属性消息会毫无问题地显示该消息。

home.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 。


@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() 方法似乎更合适。

关于javascript - 如果在 html 中启用了 javascript,则无法获取 Controller 模型属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57538884/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com