时间戳

首页 > 解决方案 > 如果在 html 中启用了 javascript，则无法获取控制器模型属性

javascript - 如果在 html 中启用了 javascript，则无法获取控制器模型属性

问题描述

我正在开发一个 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 调用返回任何内容，我想在同一页面上实现/打印错误或成功消息。如果我能得到任何帮助，那将非常有帮助。

标签： javascriptjavaajaxspring-bootstatusbar

解决方案

您可以为您的 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() 方法似乎更合适。

推荐阅读