创建文件以在Javascript中上传到Spring Controller

时间:2017-11-01 12:36:44

标签: javascript java html spring

我有一个非常大的字符串,需要通过html input中的form标记从客户端传递到服务器。到目前为止,我已经将它传递给了像这样的javascript:

document.getElementById("editorText").value = quill.getText();

而上传看起来像这样:

<form action="/someEndpoint" method="post">
    <input class="btn btn-success btn-lg" style="margin-top: 15px;" type="submit" th:value="#{mSave}"/>
    <textarea style="visibility:hidden" id="editorText" name="editorText"></textarea>
</form>

这样做的问题是,当quill.getText()太大时,上传不会以这种方式运行。我想通过multipart文件处理上传。

所以在这种情况下我需要的是javascript代码,它从quill.getText()获取文本,创建一个文件(最好是.xml)并将此文件服务器上传到上面提到的html form中控制器端点看起来像这样:

@RequestMapping(value = "/someEndpoint", method = RequestMethod.POST)
public String handleFileUpload(final Model model, @RequestParam("editorText") String editorText){

//handling stuff
}

我在var xml = jQuery.parseXML(quill.getText())的路线上尝试了一些东西,但是无法安静地让它发挥作用。 什么是将字符串打包成.xml文件以便上传的最简单方法?

ps:quill.getText()指的是this

编辑1:将html input更改为文本字段。

1 个答案:

答案 0 :(得分:0)

在您发布的代码中,我可以看到您正在将quill文本分配给输入类型文本。如果您可以看到帖子here,则输入类型字段有一个最大限制。

然而,文本区域可以包含无限数量的字符。那么,您可以尝试创建隐藏的textarea <textarea style="visibility:hidden" id="quillText"></textarea>并为其指定值quill.getText()吗?

它应该在服务器端为您提供完整的文本。

修改

以下代码对我有用。

UI:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <link href="https://cdn.quilljs.com/1.1.6/quill.snow.css" rel="stylesheet">
  <script src="https://cdn.quilljs.com/1.1.6/quill.js"></script>

<form action="submitQuill" method="post">
  <!-- Create the editor container -->
  <input type='submit' onclick="javascript:submitForm()"/>
  <div id="editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>
  </div>
  <textarea style="visibility:hidden" id="editorText" name="editorText"></textarea>

</form>
  <!-- Initialize Quill editor -->
  <script>
    var quill = new Quill('#editor', {
      theme: 'snow'
    });

    function submitForm(){
        var quillText = quill.container.firstChild.innerHTML;
        $("textarea#editorText").val(quillText);
        document.form.submit();
    }

  </script>

在服务器端:

@RequestMapping(value="/submitQuill")
    public ModelAndView submitQuill(@RequestParam String editorText){
        System.out.println("Editor Text = "+editorText);
        return new ModelAndView("quill");
    }

控制台上的输出:

Editor Text = <p>Hello World!</p><p>Some initial <strong>bold</strong> text</p><
p><br></p>