Ajax利用FormData提交文件和数据

最新推荐文章于 2024-04-28 04:01:16 发布

susie_小石头

最新推荐文章于 2024-04-28 04:01:16 发布

阅读量2.5k

点赞数

分类专栏：文件上传

文件上传专栏收录该内容

5 篇文章 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/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发送是很简单的一个问题，那么问题在哪里呢？问题在于后台如何取到普通的表单数据。同时可以指定回调函数

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这个博客讲了用最原始的输入流方法读取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的使用。

/*进度条元素*/

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

/*进度条样式*/

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

susie_小石头

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax利用FormData提交文件和数据

一、ajax提交纯表单（不包含文件或二进制或非ASCII数据） ajax提交表单绕了很久，遇到一些问题进行测试下以加深理解，测试使用浏览器 49.0.2623.110 m，HTML使用HTML4标准。下文提到的ajax为原生javascript的ajax（脚本化HTTP），都是个人理解，如有错误还望被指正。关于AJAX，XMLHttpRequest，FormData等应该还有许多待深入的问...
复制链接

扫一扫