form表单中的enctype

 背景：

今天面试，面试官问我文件上传的enctype是什么，我隐约记得大概是form-data(全名：multipart/form-data)，然后他又问我，意思大概是提交的时候是什么形式的，当时我就蒙了一句是流的形式提交上去的，自己对这块也不清楚，有点懵，回来找了下相关资料总结下不足

参考的网上文章：

https://blog.csdn.net/ye1992/article/details/49998511

1、编码类型：

• application/x-www-form-urlencoded： 在发送前编码所有字符（默认）。这是标准的编码格式
• multipart/form-data： 不对字符编码，在使用包含文件上传控件的表单时，必须使用该值
• text/plain： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符

2、用postman进行相关类型的实验

1. multipart/form-data   

• 会将表单的数据处理为一条消息，以标签为单元，用分隔符分开
• 可以上传键值对，也可以上传文件。当上传的字段是文件时，会有Content-Type来表名文件类型
• content-disposition，用来说明字段的一些信息

     由于有boundary隔离，所以multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件

请求的html，填写name输入框，然后submit提交

<form action="upload.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" /> 
<input type="text" name="name"  /> 
<br />
<input type="submit" name="submit" value="Submit" />
</form>

</body>
</html>

抓包fiddler结果

------WebKitFormBoundaryLAQXcRMwz6fXAw3z
Content-Disposition: form-data; name="file"; filename="01.png"
Content-Type: image/png

�PNG
......                照片的二进制文件
------WebKitFormBoundaryLAQXcRMwz6fXAw3z
Content-Disposition: form-data; name="name"

rcj
------WebKitFormBoundaryLAQXcRMwz6fXAw3z
Content-Disposition: form-data; name="submit"

Submit
------WebKitFormBoundaryLAQXcRMwz6fXAw3z--           

结果：此时，我们可以在upload.php中获取通过$_FILES全局变量及$_POST全局变量获取提交过来的图片和name字段的值

 

      2.application/x-www-from-urlencoded

• 会将表单内的数据转换为键值对，比如,name=java&age = 23

  请求的html，选择上传文件，其中name字段故意填充一个汉字

<form action="upload.php" method="post" enctype="application/x-www-from-urlencoded">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" /> 
<input type="text" name="name"  /> 
<br />
<input type="submit" name="submit" value="Submit" />
</form>

</body>
</html>

抓包fiddler结果

file=02.png&name=%26%2320219%3B&submit=Submit    //表单内的数据转换为键值对

结果：Notice: Undefined index: file ，php会报错，说明传递文件失败，但是能获取name值

 

   3.text/plain

可以上传任意格式的文本，例如text、json、xml、html等，这里用postman来做http请求工具

抓包fiddler结果

 

服务端获取方式

<?php
$content = file_get_contents("php://input");
var_dump($content);

print_r($_POST);//这个获取不到数据

结果：

 

 

 

4.二进制形式的

相当于Content-Type:application/octet-stream,从字面意思得知，只可以上传二进制数据，通常用来上传文件，由于没有键值，所以，一次只能上传一个文件。

postman请求截图

 抓包fiddler结果

 

serve端程序

<?php
$content = file_get_contents("php://input");
if(!file_exists('upload/move.png')){
    touch('upload/move.png');
}

file_put_contents('upload/move.png',$content);

结果：文件正常上传

 

 

 

 

 

 

multipart/form-data与x-www-form-urlencoded区别

    multipart/form-data：既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息；

    x-www-form-urlencoded：只能上传键值对，并且键值对都是间隔分开的。