Ajax利用FormData提交表单

一、ajax提交纯表单（不包含文件或二进制或非ASCII数据）

     ajax提交表单绕了很久，遇到一些问题进行测试下以加深理解，测试使用浏览器 49.0.2623.110 m，HTML使用HTML4标准。下文提到的ajax为原生javascript的ajax（脚本化HTTP），都是个人理解，如有错误还望被指正。关于AJAX，XMLHttpRequest，FormData等应该还有许多待深入的问题，还需要进一步学习，本文仅目前实践内容。

                 

二、ajax上传文件

1、  上传单个文件

/* ajaxupload.jsp */

<%@ page contentType="text/html; charset = utf-8" %>
html>

 
     
 
 
    请选择要上传的文件：id="uploadItem"name="uploadItem" type="file">
 
 

/*upload */

public class upload extends HttpServlet{
    public void doPost(HttpServletRequest request,HttpServletResponse response)throws      IOException,ServletException {
        try {
            request.setCharacterEncoding("UTF-8");
            DiskFileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            List items = upload.parseRequest(request);

            String fileName="";
            File savefile ;
            String apkPath = "D:/temp/";

            for (FileItem item : items) {
                if (!item.isFormField()) {
                    fileName = apkPath + item.getName();
                    System.out.println("fileName = " + fileName);
                    savefile = new File(fileName);
                    item.write(savefile);
                }
            }
        }catch(Exception e){
          e.printStackTrace();
        }
    
        PrintWriter out = null;
        try {
            out = response.getWriter();
        }catch (Exception e){
            e.printStackTrace();
        }
        out.println("upload successed!");
    }
  }

如下代码，定义一个type=file的input组件，监听变化后直接上传。

注意点：使用了FormData存储上传的文件。FormData对象介绍https://developer.mozilla.org/zh-CN/docs/Web/API/FormData，使用https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects。这是XMLHttpRequestlevel2中新引入的对象，XMLHttpRequest2见https://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/，这是2012年的草案。其兼容性可以在CanIUse网站http://caniuse.com/查询。相关对象的使用等最好查询比较专业的网站，而不是查询个人博客等，个人博客有的可能不是很好理解，并且不会实时随着对象变化来更新。

本人错误使用：设置了XMLHttpRequest的Content-Type为mutipart/form-data，这样导致错误“the request was rejected because no multipartboundary was found”，下面是浏览器中HTTP请求头信息，我们可以看到Content-Type中没有boundary（浏览器随机生成）。

下面是成功传送时候的HTTP请求信息。

本人使用过的文件上传插件Dropzone也是用FormData上传文件的，设置的请求头属性有Accecpt，Cache-Control，X-Requested-With，不包含Content-Type。从请求头中我们可以看到Content-Type是自动被设置为multipart/form-data的。从HTTP请求信息中我们还可以看到Request Payload，这是请求的有效荷载，也是一个值得讨论的问题，可以跟请求参数的Query String Parameter做下比较。

2、  提交表单，表单中携带文件

根据FormData的使用我们可以看到，将简单的键值对数据和文件数据放到FormData发送是很简单的一个问题，那么问题在哪里呢？问题在于后台如何取到普通的表单数据。

HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">


    
    http-equiv="Content-Type" content="text/html;charset=utf-8">
    


enctype="multipart/form-data" method="post" name="fileinfo">
    
        
            
            
        
        
            
            
        
        
            
            
        
    
Your email address:
type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32"
                       maxlength="64"/>
            
Custom file label:
type="text" name="filelabel" size="12" maxlength="32"/>

            
File to stash:
type="file" name="file" required/>
            

id="output">
href="javascript:sendForm()">Stash the file!

 

如上代码表单中包含普通的键值对和文件，下面是请求头

所有的数据都放在RequestPayload（原生AJAX使用）中，该如何转换呢？Request.getParameter应该只能得到get请求中Query String Parameters或者post请求Form Data请求体中的数据。http://blog.csdn.net/mhmyqn/article/details/25561535?utm_source=tuicool&utm_medium=referral这个博客讲了用最原始的输入流方法读取Request Payload中的数据，但是这要设置Content-Type 为application/x-www-form-urlencoded。最后，转了半天发现上传组件的parseRequest转化出来FileItem是包括fieldItem的（一开始以为只是file文件的信息被解析出来了），如果是表单域，java可以如下代码进行解析（参考网址http://www.blogjava.net/xyzroundo/articles/186217.html）

public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
    try {
        request.setCharacterEncoding("UTF-8");

        boolean isMultipart = ServletFileUpload.isMultipartContent(request);
        if (isMultipart) {
            DiskFileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            List items = upload.parseRequest(request);

            //Process the uploaded items
            Iterator iter = items.iterator();

            while(iter.hasNext()){
                FileItem item = (FileItem)iter.next();
                if(item.isFormField()){
                    String name =item.getFieldName();
                    String value = item.getString("UTF-8");
                    System.out.println("name = " + name + " ; value = " + value);
                }
            }
        }


    } catch (Exception e) {
        e.printStackTrace();
    }

    PrintWriter out = null;
    try {
        out = response.getWriter();
    } catch (Exception e) {
        e.printStackTrace();
    }
    out.println("upload successed!");
}

3、 添加进度条

添加进度条HTML元素，并设置样式，为XMLHttpRequest添加onprogress事件，涉及e.lengthComputable，e.uploaded，e.total的使用。

/*进度条元素*/

class="progress-display">
    <td>上传进度：td>
    <td>id="progress-bar" class="progress-bar">class="progress-bar-after">td>

/*进度条样式*/

.progress-bar{
    display:inline-block;
    background-color:honeydew;
    width:100px;
    height:10px;
    position:relative;
    border-radius: 2px;
    border:0.5px solid gray;
}
.progress-bar-after{
    content:"";
    width:0%;
    height:10px;
    background-color:green;
    position:absolute;
    left:0;
}

/*XMLHttpRequest添加onprogress事件*/

oReq.onprogress = function(e){
    if(e.lengthComputable){
      document.querySelector(".progress-bar-after").style.width = Math.round(100* e.loaded/ e.total) + "%";
    }
}

 

三、总结

    做完上述工作以后发现AJAX通过FormData上传文件是件挺简单的事情，不过应该考虑FormData的兼容性。