html5 multy file upload

http://stackoverflow.com/questions/7124269/uploading-multiple-p_w_picpaths-to-gae-blobstore-using-html5-multiple-file-input 

<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

n the servlet, you obtain the blobs with:

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

http://itindex.net/blog/2012/04/14/1334367483953.html 

HTML5帶來一個很棒的功能，就是可以使用XMLHttpRequest版本2上傳文件。

現代Gecko和WebKit瀏覽器，包括一個完美的對象參數formdata，容許結合既簡單又複雜的表單數據（文本和文件）包含在Ajax請求的對象中。

讓咱們告訴你如何作到這個。

在這個例子中，咱們有兩個輸入框的表單，一個表明一個簡單的文本字段，另外一個表明一個文件字段，以下面的代碼所示。

<form id="form1">    

 

    <label for="sampleText">Please enter a text</label>

    <input id="sampleText" name="sampleText" type="text" /> <br/>

    <label for="sampleFile">Please select a file

    <input id="sampleFile" name="sampleFile" type="file" /> <br/>

    <input id="uploadBtn" type="button" value="Ajax Submit" onClick="performAjaxSubmit();"></input>

 

</form>

 

<script type="text/javascript">

 

    function performAjaxSubmit() {

        var sampleText = document.getElementById("sampleText").value;

        var sampleFile = document.getElementById("sampleFile").files[0];

        var formdata = new FormData();

        formdata.append("sampleText", sampleText);

        formdata.append("sampleFile", sampleFile);

 

        var xhr = new XMLHttpRequest();       

        xhr.open("POST","/fileUploadTester/FileUploader", true);

        xhr.send(formdata);

        xhr.onload = function(e) {

            if (this.status == 200) {

               alert(this.responseText);

            }

        };                    

    }   

 

</script> 

 

正如咱們在上面代碼中看到，它是一個正常的老XHR的代碼，但它有兩個差別：

1。在HTML5輸入文件的文件屬性，這使你可以獲得的文件對象。

2。參數formdata對象，其中有一個方法叫作append，容許加入任何形式的數據（文本和文件）的對象。參數formdata對象具備另外一大優點，這是Ajax請求「multipart/ form-data」沒有任何特殊代碼。

 

如今，讓咱們繼續看Servlet代碼（這裏用的是Apache Commons File Upload處理multipart表單請求解析）。

 

 public class FileUploader extends HttpServlet {

 

    protected void doPost(HttpServletRequest request,

                          HttpServletResponse response)

                          throws ServletException, IOException {

        String ajaxUpdateResult = "";

        try {

            List items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);            

            for (FileItem item : items) {

                if (item.isFormField()) {

                    ajaxUpdateResult += "Field " + item.getFieldName() + 

                    " with value: " + item.getString() + " is successfully read\n\r";

                } else {

                    String fileName = item.getName();

                    InputStream content = item.getInputStream();

                    response.setContentType("text/plain");

                    response.setCharacterEncoding("UTF-8");

                    // Do whatever with the content InputStream.

                    System.out.println(Streams.asString(content));

                    ajaxUpdateResult += "File " + fileName + " is successfully uploaded\n\r";

                }

            }

        } catch (FileUploadException e) {

            throw new ServletException("Parsing file upload failed.", e);

        }

        response.getWriter().print(ajaxUpdateResult);

    }

} 

 

Servlet從請求中簡單解析multipart表單，而後構造一個結果消息。

請記住，此代碼能與Chrome5和Safari5，Firefox 4的工做，但不幸的是將不能在IE9下工做，由於悲慘的IE9沒有參數formdata對象，我將告訴你如何能夠在IE9實現相同的行爲，「我相信你會不喜歡它，由於它是有點難「。