为什么我的 formdata.append 没有向服务器发送键值对？答案

【问题标题】：Why my formdata.append is not sending key value pair to server?为什么我的 formdata.append 没有向服务器发送键值对？
【发布时间】：2014-11-03 03:09:24
【问题描述】：

我认为它应该是非常简单的 jquery 代码，但我看不到它将任何结果传递给服务器。我现在只想测试字符串，不需要文件！在服务器中，我只在请求中看到 multipart/form-data，但参数字段是 {}..... 请帮助...

Host: localhost:8888
Connection: keep-alive
Content-Length: 143
Origin: http://localhost:8888
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryUCJkE7tIQ5AqLm74
Accept: */*
Referer: http://localhost:8888/
Accept-Encoding: gzip,deflate
Accept-Language: en-US,en;q=0.8,zh-CN;q=0.6

请求负载看起来像

------WebKitFormBoundary93G8teUQTA7hGmxn
Content-Disposition: form-data; name="action"

insert
------WebKitFormBoundary93G8teUQTA7hGmxn--

我使用java servlet作为服务器端，其中

String action = request.getParameter("action");

返回null

下面是我的代码

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Distributed Storage System</title>
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>
    <body>
    <div id="result"></div>
    <form id="form">
        <table>
          <tr>
            <td colspan="2" style="font-weight:bold;">Insert:</td>        
          </tr>
          <tr>        
            <td>Key:<input type="text" id="insertKey" name="key"/></td>
            <td>File:<input type="file" id="insertValue" name="file"/></td>
            <td><input type="button" value="Insert" id="insertValue" onClick="insert()"/></td>        
          </tr>
        </table>
    </form>
    <script type="text/javascript">
        function insert(){
            var data = new FormData();
            data.append('action','insert');
            //var file = $("#insertValue")[0].files[0];
            var xhr = new XMLHttpRequest();
            xhr.open( 'POST', '/distributedstorage', true );
            xhr.send( data );
        }

    </script>
  </body>
</html>

【问题讨论】：

看起来不错 - jsfiddle.net/arunpjohny/y951t24b/1 - 在Headers 下查看Request Payload
对不起，“查看标头下的请求有效负载”是什么意思
是的。在标头下请求有效负载
好的，我在我的 chrome 中查看，它显示 ------WebKitFormBoundary93G8teUQTA7hGmxn Content-Disposition: form-data; name="action" insert ------WebKitFormBoundary93G8teUQTA7hGmxn-- 看起来就在那里，但为什么我的 servlet 不接呢？ String action = request.getParameter("action");

标签： java javascript jquery apache-commons-fileupload

【解决方案1】：

对于Content-Type: multipart/form-data，我们应该使用FileItem 方法getFieldName() getString() 来获取常规表单字段数据。
在这里，我提供了来自带有 sn-ps 的文档的更多详细信息，以使用 ServletFileUpload 读取 Servelet 中的所有表单字段数据

Give a look into apache-docs for Processing the uploaded items

请参阅下面的代码片段以了解此处理：

处理上传的表单元素内容，包括常规字段和文件

// Process the uploaded items
Iterator<FileItem> iter = items.iterator();
while (iter.hasNext()) {
    FileItem item = iter.next();

    if (item.isFormField()) {
        processFormField(item);
    } else {
        processUploadedFile(item);
    }
}

处理常规表单字段

// processFormField
if (item.isFormField()) {
    String name = item.getFieldName();
    String value = item.getString();
    ...
}

处理文件上传

// processUploadedFile
if (!item.isFormField()) {
    String fieldName = item.getFieldName();
    String fileName = item.getName();
    String contentType = item.getContentType();
    boolean isInMemory = item.isInMemory();
    long sizeInBytes = item.getSize();
    ...
}

请继续http://commons.apache.org/proper/commons-fileupload/using.html中的其余代码

【讨论】：