使用HTML5多文件输入将多个图像上传到GAE Blobstore [英] Uploading multiple images to GAE Blobstore using HTML5 multiple file input

问题描述

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

由于我的网络应用程序将被摄影师用于批量上传照片，因此绝对至关重要，以便在客户端的浏览器上启用多个文件选择每次上传200多张照片会很痛苦）

客户端HTML看起来像这样：

 < form action =/ uploadmethod =postenctype =multipart / form-data> 
< input type =filename =myFiles []multiple =true/> 
< input type =submit/> 
< / form> 
  

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

  public class PhotoUploadServlet扩展HttpServlet {
 $ b @Override 
 protected void doPost（HttpServletRequest req，HttpServletResponse resp ）
 throws ServletException，IOException {
 //将每张myFiles []的照片依次上传到GAE Blobstore 
} 
  

我正在计划使用 here 。

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

有人可以向我解释如何将myFiles []参数解释为按顺序使用的内容，如 List< SomeImageType> / code>。然后，我可以轻松地将 List< SomeImageType> 中的每张照片分别保存到Blobstore！

预先感谢！

我已经看过<这篇文章，但由于我不知道Python，所以我在Nick Johnson的博客文章中提出的解决方案有点失落。

  Map< String，的BlobKey> blobs = blobstoreService.getUploadedBlobs（req）; 
  

但是您需要一个小小的修改文件的名称，否则blob字段将只包含一个键：

 < 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> 
 $ b 
 action =<％= blobstoreService.createUploadUrl（/ upload）％ >> 
< input type =filename =fileToUploadid =fileToUploadmultiple /> 
< input type =buttononclick =uploadFile（）; value =Upload/> 
< / form> 
  

这是GAE问题： http://code.google.com/p/googleappengine/问题/细节？id = 3351

I'm trying to store multiple image files to the GAE Blobstore using HTML5 multiple file input.

Since my web application will be used by photographers to batch upload photos, it is absolutely critical to enable multiple file selection on the client's browser (uploading 200+ photos one at a time would be a pain)

The client side HTML would look like this:

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

On the server side, a Java HttpServlet would be used to store the group of photos:

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
  }

I'm planning on storing each photo individually using the procedure explained here.

The problem: I don't know how to extract every image individually from the myFiles[] parameter of the HttpServletRequest.

Could someone explain me how to interpret the myFiles[] parameter as something that would be easily used in sequence, alike a List<SomeImageType>. Then I could easily save each photo in the List<SomeImageType> individually to the Blobstore!

Thanks in advance!

P.S.: I've already looked at this post, but since I do not know Python, I'm a little bit lost by the solution proposed in Nick Johnson's blog post.

解决方案

In the servlet, you obtain the blobs with:

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

But you need a small hack to change the name of the files, otherwise blobs field will contain just one key:

<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>

This is the GAE issue: http://code.google.com/p/googleappengine/issues/detail?id=3351

这篇关于使用HTML5多文件输入将多个图像上传到GAE Blobstore的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！