表单提交enctype参数详解之：application/x-www-form-urlencode和multipart/form-data

application/x-www-form-urlencode

我们在提交表单的时候，form表单参数中会有一个enctype的参数。enctype指定了HTTP请求的Content-Type。

默认情况下，HTML的form表单的enctype=application/x-www-form-urlencoded。

application/x-www-form-urlencoded是指表单的提交，并且将提交的数据进行urlencode。默认情况下，我们所有的表单提交都是通过这种默认的方式实现的。

在火狐浏览器下，我们可以看一下提交数据的过程：

我们可以看到Content-type：

Content-Type      
application/x-www-form-urlencoded; charset=UTF-8  
           

然后继续看一下原始请求数据，原始的请求数据被urlencode了。

Ajax默认也是通过HTTP application/x-www-form-urlencoded提交数据。可以看下Jquery的源码：

multipart/form-data

一般情况下，我们如果要在表单中上传文件，一般会将form的enctype参数设置为multipart/form-data。这种方式只支持POST的请求方式。

Contype-Type=multipart/form-data情况的时候，都会通过一个特殊的字符串来将原始POST数据进行分割。

我们可以看到下面的请求中Content-type的类型：

Content-Type      
multipart/form-data; boundary=---------------------------66841812532223  
           

其中boundary=---------------------------66841812532223，为分割符号。

其中数据块开始的分隔符 =={boundary} 会在前面加上“==”

数据块结束的分隔符 =={boundary}== 会在后面加上“==”

继续看下原始数据，我们可以清晰的看到，各种请求数据被boundary值进行了分割。

虽然这些知识点很早就知道了，但是知其然知其所以然可以让我们深入每一个技术细节。

application/json

有些时候，我们会直接提交Content-type是json数据格式的请求。

例如：

var data = {'title':'test', 'sub' : [1,2,3]};  
$http.post(url, data).success(function(result) {  
    ...  
});  
           

请求：

POST http://www.example.com HTTP/1.1  
Content-Type: application/json;charset=utf-8  

{"title":"test","sub":[1,2,3]}  
           

这种情况下，请求的Content-Type是Json的数据格式，http body中的内容就是请求的json数据。

如果是php的话，需要通过 php://input来接收POST中的原始数据信息。

如果是Java，则需要下面的方式来读取HTTP 请求BODY中的数据

protected void processRequest(HttpServletRequest request,HttpServletResponse response) {
    try {
        request.setCharacterEncoding("UTF-8");
        int size = request.getContentLength();  
        System.out.println(size);  
        InputStream is = request.getInputStream();  
        byte[] reqBodyBytes = readBytes(is, size);  
        String res = new String(reqBodyBytes);  
        System.out.println(res);  
        response.setContentType("text/html;charset=UTF-8");  
        response.setCharacterEncoding("UTF-8");  
        response.getOutputStream().write(res.getBytes("utf-8"));  
        response.flushBuffer();  
    } catch (Exception e) {
    }
}

public static final byte[] readBytes(InputStream is, int contentLen) {
    if (contentLen > 0) {
        int readLen = 0;  
        int readLengthThisTime = 0;  
        byte[] message = new byte[contentLen];  
        try {
             while (readLen != contentLen) {
             readLengthThisTime = is.read(message, readLen, contentLen - readLen);
             if (readLengthThisTime == -1) {// Should not happen.  
                 break;
             }
             readLen += readLengthThisTime;
             }
             return message;
        } catch (IOException e) {
            // Ignore  
            // e.printStackTrace();  
        }  
    }
    return new byte[] {};  
}