html5 multy file upload
http://stackoverflow.com/questions/7124269/uploading-multiple-images-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实现相同的行为，“我相信你会不喜欢它，因为它是有点难“。