java ajax 文件上传_在HTML5里用Ajax上传文件到Java Servlet

HTML5带来一个很棒的功能，就是能够使用XMLHttpRequest版本2上传文件。

现代Gecko和WebKit浏览器，包括一个完美的对象参数formdata，允许结合既简单又复杂的表单数据(文本和文件)包含在Ajax请求的对象中。

让我们告诉你如何做到这个。

在这个例子中，我们有两个输入框的表单，一个代表一个简单的文本字段，另一个代表一个文件字段，如下面的代码所示。

Please enter a text

Please select a file

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);

}

};

}

正如我们在上面代码中看到，它是一个正常的老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实现相同的行为，“我相信你会不喜欢它，因为它是有点难“。

从这里下载完整的代码。

来源：英文原文          中文编译：IT瘾      转载请保留原文链接

IT瘾于2012年4月14日 上午09时38分03秒发布

#