Uploading multiple images to GAE Blobstore using HTML5 multiple file input

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/7124269/uploading-multiple-images-to-gae-blobstore-using-html5-multiple-file-input