Play Framework 2.1 RC1 中的 AJAX 文件上传传送一个空文件

Question

Scala/Play 大师。

我正在尝试在 Play 2.1 (RC1) 中使用 AJAX 上传文件。对于客户端部分，我使用 eldarion/bootstrap-ajax一切似乎都很好，除了上传的文件是空的。

前端代码段:

...
<form action="@routes.Campaigns.upload" method="post" class="form ajax replaceable" data-replace=".replaceable">
    <input type="file" name="picture">
    <p><input class="btn" type="submit"></p>
</form>
...

请注意，我必须使用明确的 <form>标签而不是 @form helper，由于所需的 css 类(数据替换)包含破折号，因此不能用作 Symbol .但不管怎么说。 Controller 中调用的操作如下所示:

  def upload = Action(parse.temporaryFile) {
    request =>
      Logger.info("Trying to upload a file")
      val resultString = try {
        val file = new File("/tmp/picture")
        request.body.moveTo(file, true)
        "file has been uploaded"
      } catch {
        case e: Exception => "an error has occurred while uploading the file"
      }
      val jsonResponse = Json.toJson(
        Map("html" -> Json.toJson("<p>" + resultString + "</p>")
        )
      )
      Ok(jsonResponse)
  }

我知道随着我的开发的进行，文件名应该设置得更智能，但目前/tmp/picture 对我来说和其他名称一样好。

生成 JSON 响应(其中包含“文件已上传”消息)，并作为 200 响应的有效负载发送回浏览器。 JSON 被接收并正确地用于修改页面(在这种情况下，只是删除了非常上传的表单)。

但是文件，虽然出现在正确的时间和正确的位置，但始终是空的:

larsson:tmp bruno$ ls -l /tmp/picture
-rw-r--r--  1 bruno  staff  0  7 Jan 03:07 /tmp/picture

在我看来，这特别奇怪，因为使用传统 multipart/form-data 的上传代码形式，没有任何 AJAX，和一个 Action与 parse.multipartFormData作为参数，而不是 parse.temporaryFile , 工作正常。

任何帮助将不胜感激。提前致谢。

Answer 1

我不知道 bootstrap-ajax，无论如何如果它没有专门支持通过 AJAX 上传文件(而且我在它的 readme 文件中没有找到关于这种可能性的任何信息)它不会使用 AJAX 发送文件。

原因:在标准 JavaScript 中，由于安全限制，使用 AJAX 上传文件是不可能的，并且有一些技术可以解决这个问题，主要是使用 iFrame，但是我可以'在 bootstrap-ajax 的代码中看不到任何相似之处，因此您可能需要修改它或使用其他解决方案。

解决方案:有一些 AJAX 文件 uploader ，适用于 HTML5，即。 jQuery File Upload ，它提供了 ajax 上传、多文件上传、将文件拖到拖放区等。

通常 HTML5 比早期版本的 HTML 更好地支持文件上传，因此您可以轻松构建 uploader 而无需使用额外的插件，请查看 this topic .如您所见，它提供了在上传之前验证某些数据的可能性，并且还提供了进度条。