如果在 html 中启用了 javascript，则无法获取控制器模型属性
Posted
技术标签:
【中文标题】如果在 html 中启用了 javascript，则无法获取控制器模型属性【英文标题】：Unable to get Controller model attribute if javascript is enabled in html 【发布时间】：2019-12-23 14:51:56 【问题描述】：我正在开发一个 Springboot Web 应用程序，其中我有一个只接受 .csv 文件的输入字段。如果我们将传递任何其他文件，它应该在同一页面上引发错误。如果通过了 CSV 文件，那么我必须在 html 文件上显示文件的实时上传状态。
我已经开发了 HTML 页面，它将显示上传文件的进度状态，但如果我传递任何其他格式的文件，那么我正在后端进行验证。在控制器中，我正在检查文件是否为不同类型，然后我正在发送模型属性消息，但我无法在 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
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 调用返回任何内容，我想在同一页面上实现/打印错误或成功消息。如果我能得到任何帮助，那将非常有帮助。
【问题讨论】：
【参考方案1】：您可以为您的 post call 分配处理程序：
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() 方法似乎更合适。
【讨论】：
以上是关于如果在 html 中启用了 javascript，则无法获取控制器模型属性的主要内容，如果未能解决你的问题，请参考以下文章
php 如果在Genesis主题中启用了JavaScript，则添加一个小内联脚本以将`js`类附加到body标记
如何在 Amazon Beanstalk 和 Tomcat 上启用 HTML/JavaScript/CSS 的 gzip