Загрузка нескольких изображений в GAE Blobstore с использованием ввода нескольких файлов HTML5 - PullRequest
2 голосов
/ 19 августа 2011

Я пытаюсь сохранить несколько файлов изображений в хранилище GAE, используя ввод нескольких файлов HTML5.

Поскольку мое веб-приложение будет использоваться фотографами для пакетной загрузки фотографий, абсолютно важно , чтобы включить выбор нескольких файлов в браузере клиента (загрузка более 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
  }

Я планирую хранить каждую фотографию индивидуально, используя процедуру, описанную здесь .

Проблема: Я не знаю, как извлечь каждое изображение индивидуально из параметра myFiles [] HttpServletRequest.

Может кто-нибудь объяснить мне, как интерпретировать параметр myFiles [] как что-то, что можно было бы легко использовать последовательно, подобно List<SomeImageType>.Тогда я мог бы легко сохранить каждую фотографию в List<SomeImageType> отдельно в Blobstore!

Заранее спасибо!

PS: я уже посмотрел этот пост ,но так как я не знаю Python, я немного растерялся из-за решения, предложенного в блоге Ника Джонсона.

1 Ответ

3 голосов
/ 24 ноября 2011

В сервлете вы получаете BLOB-объекты с:

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>

<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

...