使用 HTML5 多文件输入将多个图像上传到 GAE Blobstore答案

【问题标题】：Uploading multiple images to GAE Blobstore using HTML5 multiple file input使用 HTML5 多文件输入将多个图像上传到 GAE Blobstore
【发布时间】：2011-10-30 18:09:40
【问题描述】：

我正在尝试使用 HTML5 多文件输入将多个图像文件存储到 GAE Blobstore。

由于摄影师将使用我的网络应用程序来批量上传照片，因此在客户端的浏览器上启用多个文件选择是绝对关键（一次上传 200 多张照片会很痛苦） )

客户端 HTML 如下所示：

   <form action = "/upload" method="post" enctype="multipart/form-data">
     <input type="file" name="myFiles[]" multiple="true"/>
     <input type="submit"/>
   </form>

在服务器端，将使用 Java HttpServlet 来存储照片组：

public class PhotoUploadServlet extends HttpServlet {

  @Override
  protected void doPost(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {
      //Upload each photo of myFiles[] in sequence to the GAE Blobstore
  }

我计划使用here 解释的过程单独存储每张照片。

问题：我不知道如何从 HttpServletRequest 的 myFiles[] 参数中分别提取每个图像。

谁能解释我如何将 myFiles[] 参数解释为可以轻松按顺序使用的参数，例如 List<SomeImageType>。然后我可以轻松地将List<SomeImageType> 中的每张照片单独保存到 Blobstore！

提前致谢！

P.S.：我已经看过 this post，但由于我不懂 Python，所以我对 Nick Johnson 博客文章中提出的解决方案有点迷茫。

【问题讨论】：

好吧，尼克约翰逊的博客文章包含解决方案。每个文件都需要自己唯一的上传 URL，因此您需要在每次上传后更新该 URL。这就是第一个代码 sn-p（它是 JavaScript 代码！）所做的。第二个 sn-p 显示了一些 Phyton 代码，它生成新的上传 URL 并将其作为响应发送给客户端。我相信你可以用 Java servlet 做同样的事情。
我帖子中的 Python 代码非常简单——几乎所有的工作都是在 Javascript 代码中完成的。您现在应该可以在一个 POST 中从 blobstore 上传多个文件，但无论如何使用文件管理器都会为用户提供更好的体验。
顺便说一句，欢迎来到 PHP 世界的 Java。您的多值表单元素不必在此处添加[]。

标签： java google-app-engine blobstore image-uploading

【解决方案1】：

在 servlet 中，您可以通过以下方式获取 blob：

Map<String, BlobKey> blobs = blobstoreService.getUploadedBlobs(req);

但是您需要一个小技巧来更改文件的名称，否则 blobs 字段将只包含一个键：

<script type="text/javascript">
   function uploadFile() {
     if (window.File && window.FileList) {
      var fd = new FormData();
      var files = document.getElementById('fileToUpload').files;
      for (var i = 0; i < files.length; i++) {  
        fd.append("file"+i, files[i]);
      }
      var xhr = new XMLHttpRequest();
      xhr.open("POST", document.getElementById('uploadForm').action);
      xhr.send(fd);
    } else {
      document.getElementById('uploadForm').submit();   //no html5
    }
}
</script>

<form id="uploadForm" enctype="multipart/form-data" method="post"
        action=<%=blobstoreService.createUploadUrl("/upload") %>">
   <input type="file" name="fileToUpload" id="fileToUpload" multiple />
   <input type="button" onclick="uploadFile();" value="Upload" />
</form>

这是 GAE 问题：http://code.google.com/p/googleappengine/issues/detail?id=3351

【讨论】：