这里要说一下,本篇我重点说的是上传,至于下载,查看对应的下载篇
在原来,文件的上传是使用form表单去提交,有的时候为了上传文件,还要专门为上传文件写一个form表单上传文件,十分的麻烦,探索宇宙已经很累了,哪有时间浪费啊!!^_^
正式进入主题
先看看怎么从html页面中发送文件,回答是:使用 FormData
FormData使用h5新添加的一个对象,可以用来包装要发送的数据,一个例子
<body>
<form>
<label for="">上传文件</label>
<input type="file" id="picture" />
<input type="button" value="确认提交" onclick="confirm()">
</form>
<script>
function confirm(e){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//构造FormData对象
var formData = new FormData();
//添加非文件数据
formData.append("username","123456");
formData.append("password","67890");
//添加文件数据
formData.append("picture",document.getElementById("picture").files[0])
//使用POST方法发送数据
xmlHttp.open("POST","/imageUpload",true);
xmlHttp.send(formData)
//返回的数据
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 && xmlHttp.status==200){
console.log(xmlHttp.responseText);
}
}
}
</script>
</body>
如上所述,你就已经发送了
{
username:123456,
password:67890,
picture:文件数据(其实这里是将文件转换为二进制了)
}
我们可以看见使用FormData添加数据非常的简单,特别是解决了在上传文件只能使用form表单的憋屈。
下面我要说说,使用FormData包装好的数据怎么传输的,我想这是非常有必要的,特别是当你在后端解析数据的时候,必须要知道传给后台的数据长什么样
使用FormData后,会将request的Content-Type设置为
“multipart/form-data;boundary=----"+一段随机的字母;
上面的boundary正如字面的意思一样,就是一个分界的意思,分开每一个键值对数据,具体的数据格式为
--boundary(换行)
Content-Disposition:form-data;name=“数据的键”(换行)
\r\n(换行)
数据的值(“换行”)
注意每一个boundary的前面要加两个“-”
对于文件的数据格式为:
—boundary(换行)
Content-Disposition:form-data;name=“数据的键”;filename=“文件名”(换行)
\r\n
Content-Type:*/*(换行)
\r\n
文件的二进制编码
用我们前面的例子,发送的数据为:
--boundary
Content-Disposition:form-data;name="username"
\r\n
123456
--boundary
Content-Disposition:form-data;name="password"
\r\n
67890
--boundary
Content-Disposition:form-data;name="picture";filename="上传的文件名"
\r\n
Content-Type:image/jpeg;
对图片进行二进制编码后的数据
--boundary--
上面的boundary是一个变量,可以是一串随机数,不过FormData默认是四个”-“加一串随机数。
在最后也要添加一个分界,不一样的是在分界的前后各加了两个”-“,表示数据发送完毕。
至此上传篇结束了