Java如何上传文件，然后返回html前端的响应？

Question

我想上传一个文件在使用前端，访问它通过我的控制器，并检查文件与java。我想上传的文件是一个XML文件。我用XML方案检查它，它运行得很好。

html：

<form method="POST" enctype="multipart/form-data" action="/uploadXML">
    <input name="file" type="file" id="importFile" /> <br>
    <button name="button" type="submit" class="buttonUpload">Upload</button>
</form>

在我的主计长中：

@RequestMapping(value="/uploadXML", method=RequestMethod.POST)
public @ResponseBody String handleFileUpload( 
        @RequestParam("file") MultipartFile file){
        String name = "test11";
    if (!file.isEmpty()) {
        try {
            byte[] bytes = file.getBytes();
            BufferedOutputStream stream = 
                    new BufferedOutputStream(new FileOutputStream(new File(name + "-uploaded")));
            stream.write(bytes);
            stream.close();
            File convertedFile = convert(file);



            //Response response = new Response("Done", name);
            //return response;
           return validateAgainstSchema(convertedFile);

        } catch (Exception e) {
            //Response response = new Response("fail", name);
            //return response;
            return "You failed to upload " + name + " => " + e.getMessage();
        }
    } else {

        //Response response = new Response("fail", name);
        //return response;
        return "You failed to upload " + name + " because the file was empty.";
    }
}

在这里，我得到上传的文件，使用*convert(file)*，我将MultiparFile转换为“普通”文件。使用validateAgainstSchema__()，我检查XML是否采用正确的格式。现在说到我不明白的部分。从* validateAgainstSchema()*我得到字符串“文件格式正确”或“文件格式不对”。如果我在我的控制器中返回这个字符串，我的浏览器重定向到一个只包含这个字符串的新页面。

但我只想在我的单页应用程序中显示结果，例如，a在我的前端。我发现ajax可以解决这个问题。

我的ajax代码：

  $( document ).ready(function() {

    var url = window.location;

    // SUBMIT FORM
    $("#customerForm").submit(function(event) {//hier die 1 entfernen!!!!!!!!!!!!!!!!!!!!!!!!!!!
        // Prevent the form from submitting via the browser.
        event.preventDefault();
        ajaxPost();
    });


    function ajaxPost(){

        // PREPARE FORM DATA
    /*  var formData = {
            firstname : $("#firstname").val(), //nachher um Textfelder und so auszulesen
            lastname :  $("#lastname").val()
        }*/

        var text = "..........,";

        // DO POST
        $.ajax({
            //type : "POST",
            contentType : "application/json; charset=utf-8",

            url : url,
            //url : url + "/uploadXml",
            //url:  "/uploadXML",
            data : text,
            //data : JSON.stringify(formData),
            //dataType : 'json',
            success : function(result) {
                //result ist hier mein html document
                if(result.status == "Done"){

                /*  $("#postResultDiv").html("<strong>" + "Post Successfully! Customer's Info: FirstName = " 
                            + result.data.firstname + " ,LastName = " + result.data.lastname + "</strong>"); */

                    $("#postResultDiv").html("<strong>" + "success" + "</strong>");
                }else{
                    $("#postResultDiv").html("<strong>" + "error" + "</strong>");
                }
                console.log(result);
                console.log("test.............");
            },
            error : function(e) {
                alert("Error!")
                console.log("ERROR: ", e);
            }
        });



    }


}) 

这部分我一点也不明白。我使用了我在网上找到的一个版本，并对它做了一些调整。(我在我的input type="file" btw.中添加了id="customerForm“)。现在，如果我按submit按钮，我的div将得到文本"error“，除了我的html被打印在控制台中，ajax请求在控制台中打印一个”成功“之外，什么也不会发生。ajax代码中的“结果”似乎是我的html代码。请您向我解释一下，我如何在div中返回XML检查过程的结果？

在这种情况下，有人可以向我解释，我如何保存XML文件？在我的项目中我需要它。

非常感谢!

Answer 1

您可以使用IFRAME来显示结果，而不是div。

<form method="POST" enctype="multipart/form-data" action="/uploadXML" target="result">
    <input name="file" type="file" id="importFile" /> <br>
    <button name="button" type="submit" class="buttonUpload">Upload</button>
</form>
<iframe id="result" name="result"></iframe>