Why my formdata.append is not sending key value pair to server?

Question

I think it should be very simple jquery code, but i cant see it pass any result to server. I just want to test string for now, no need for file! In the server, i only see multipart/form-data in request, but parameter field is {}..... Please help...

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

and request payload looks like

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

insert
------WebKitFormBoundary93G8teUQTA7hGmxn--

i use java servlet as server side, where

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

retrun null

and below is my code

<%@ 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>

looks fine - http://jsfiddle.net/arunpjohny/y951t24b/1/ - look at `Request Payload` under `Headers` — Arun P Johny, Nov 03 '14 at 03:12
im sorry, but what do you mean "look at Request Payload under Headers" — ouyadi, Nov 03 '14 at 03:24
ok, i check there in my chrome, it shows ------WebKitFormBoundary93G8teUQTA7hGmxn Content-Disposition: form-data; name="action" insert ------WebKitFormBoundary93G8teUQTA7hGmxn-- looks like it is there, but why my servlet not picking it up? String action = request.getParameter("action"); — ouyadi, Nov 03 '14 at 03:40

score 1 · Accepted Answer · answered Nov 03 '14 at 05:05

For Content-Type: multipart/form-data we should use FileItem methods getFieldName() getString() to get regular form fields data.
Here I'm providing more details from docs with the snippets, to read all form fields data in Servelet using ServletFileUpload

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

See below code-snip for understanding on this processing:

Handling uploaded Form elements content both regular fields and files

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

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

Process a regular form field

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

Process a file upload

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

Please proceed rest of the code in http://commons.apache.org/proper/commons-fileupload/using.html

Why my formdata.append is not sending key value pair to server?

1 Answers1