<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實現相同的行爲，“我相信你會不喜歡它，因爲它是有點難“。