<< 构建移动Web应用程序的技术堆栈 | 首页 | 开发杀手移动用户界面的7个步骤 >>

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

Ajax file upload to a Java Servlet in HTML5

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实现相同的行为,“我相信你会不喜欢它,因为它是有点难“。

 

从这里下载完整的代码

 

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

 

标签 : , ,



发表评论 发送引用通报