Search code examples
javajavascriptjqueryapache-commons-fileupload

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

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>
Solution

  • 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