Ajax利用FormData提交文件和数据

灰太狼 2021-09-15 03:20 436阅读 0赞

一、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" %>
    <!DOCTYPE html>
    <html>
      <head>
          <title>Asynchronous Javascript and XML</title>
      </head>
      <body>
        请选择要上传的文件：<input id="uploadItem"name="uploadItem" type="file">
      <script>
          var test= function x(){
              var elem= document.getElementById("uploadItem");
    
              elem.addEventListener("change",function() {
                  var item=  document.getElementById("uploadItem").files[0];
                  var formData = new FormData();
                  formData.append("uploadItem",item);
    
                  var xhr = new XMLHttpRequest();
                  xhr.open("post","../upload");
                  //xhr.setRequestHeader("Content-Type","multipart/form-data");
                  xhr.send(formData);
              },false);
          }();
      </script>
      </body>
    </html>

/\* upload.jsp \*/

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<FileItem> 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_API_FormData]，使用[https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using\_FormData\_Objects。这是XMLHttpRequest][https_developer.mozilla.org_zh-CN_docs_Web_Guide_Using_FormData_Objects_XMLHttpRequest]level2中新引入的对象，XMLHttpRequest2见[https://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/][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发送是很简单的一个问题，那么问题在哪里呢？问题在于后台如何取到普通的表单数据。同时可以指定回调函数

XMLHttpReq.onreadystatechange = callback; //指定回调函数

function callback()\{

if(XMLHttpReq.readyState == 4&&XMLHttpReq.status == 200&&)\{

**var** res = XMLHttpReq.responseText;  //返回文本，如果后台返回的是json字符串，如 \{"flag":"success"\}

//可以使用eval函数转成json

res=eval('('+res+')');

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>提交包含数据和文件的表单</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <script type="text/javascript">
           function sendForm(){
             var oData = new FormData(document.forms.namedItem("fileinfo"));
               oData.append("CustomField","This is some extra data");
               var oReq = new XMLHttpRequest();
               oReq.open("post","../upload",true);
               oReq.send(oData);
           }
        </script>
    </head>
    <body>
    <form enctype="multipart/form-data" method="post" name="fileinfo">
        <table>
            <tr>
                <td><label>Your email address:</label></td>
                <td><input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32"
                           maxlength="64"/>
                </td>
            </tr>
            <tr>
                <td><label>Custom file label:</label></td>
                <td><input type="text" name="filelabel" size="12" maxlength="32"/><br/>
                </td>
            </tr>
            <tr>
                <td><label>File to stash:</label></td>
                <td><input type="file" name="file" required/>
                </td>
            </tr>
        </table>
    </form>
    <div id="output"></div>
    <a href="javascript:sendForm()">Stash the file!</a>
    </body>
     </html>

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

所有的数据都放在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][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的使用。

/*进度条元素*/

/*进度条样式*/

.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的兼容性。

[https_developer.mozilla.org_zh-CN_docs_Web_API_FormData]: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
[https_developer.mozilla.org_zh-CN_docs_Web_Guide_Using_FormData_Objects_XMLHttpRequest]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects%E3%80%82%E8%BF%99%E6%98%AFXMLHttpRequest
[https_www.w3.org_TR_2012_WD-XMLHttpRequest-20120117]: https://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/
[http_blog.csdn.net_mhmyqn_article_details_25561535_utm_source_tuicool_utm_medium_referral]: http://blog.csdn.net/mhmyqn/article/details/25561535?utm_source=tuicool&utm_medium=referral