表单上传可以分为两种方式,一种是文本消息上传,另一种则是文件上传。
文本消息上传,例如登录时的用户名,密码传给服务器;文件上传,例如完善个人信息之类的上传个人照片。
其中,根据上传的方式,我们又可以分为两种方法,分别是form表单上传,ajax方式异步上传。
1、form表单上传
这种方式是最基本的也是最常见的上传方式。
其中文本与文件两种类型的最大区别便是上传文件的时候要设置enctype属性。即:
<form action="upload" method="post" enctype="multipart/form-data">
<input type="file" name="file"/>
<input type="text" name="text"/>
<input type="submit"/>
</form>
enctype属性有两个,“application/x-www-form-urlencoded”,enctype属性值设为这个表示上传的内容为文本,所以一般我们只是上传文本信息的时候不需要设定enctype属性,因为浏览器给的enctype默认值就是它。而当我们上传文件的时候,则需要显性的设置enctype为“multipart/form-data”,表示以二进制形式把数据传到服务器。
2、xhr上传
所谓的ajax上传其实就是利用了XMLHttpRequest对象以及它的方法。
注意上传时要区分开get方法与post方法。
假设我们是使用get方法上传文本给服务器,那么写法如下:
var xhr=new XMLHttpRequest();
xhr.open("GET","upload?username=qiangzi&password=123");
xhr.send(null);
把需要传给服务器的数据构造在url中,利用?号传值把数据传给服务器。
当我们使用的是post方法时,此时的数据是通过send方法传送,同时还要注意设置Content-type属性。
var xhr=new XMLHttpRequest();
xhr.open("POST","upload");
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("user=qiangzi");
由于此处我们是上传文本,所以设置的Content-type和form表单一样设为application/x-www-form-urlencoded
那么,当我们要上传的是文件时,该怎么使用xhr对象处理?
这个时候,就要用到FormData对象。
<input type="file" id="file"/>
<input type="button" id="btn" value="上传"/>
<script>
var file=document.getElementById("file");
var btn=document.getElementById("btn");
btn.onclick=function()
{
var formData=new FormData()
formData.append("photo",file.files[0]);
var xhr=new XMLHttpRequest();
xhr.open("POST","upload");
xhr.setRequestHeader("Content-type","multipart/form-data;charset=UTF-8");
xhr.send(formData);
}
</script>
由于上传的是文件,所以此处设了
xhr.setRequestHeader("Content-type","multipart/form-data;charset=UTF-8");
然后,我们创建了一个formData对象,并使用该对象的append方法把file.files[0],即获取选中的文件,设置一个key-value,其中files[0]这个是fileList对象的一个用法,获取file上传的文件。至此,我们就完成了xhr上传文件,也可理解为ajax的文件上传?
扩展:那么关于FormData这个对象,除了可以结合xhr上传文件,当然也可以上传普通的文本信息。
关于FormData的一种用法是
var form=new FormData();
form.append("username","qiangzi");
form.append("password","123");
xhr.send(form)
对于这个用法,稍微有点鸡肋,一般append方法都是结合以下使用:
另一种用法:假设你有一个form表单,同时form表单就是填写信息的地方,那么我们可以这样
<form action="upload" method="post" enctype="multipart/form-data" id="form">
<input type="file" name="file"/>
<input type="text" name="text"/>
<input type="submit" value="提交"/>
</form>
<script>
var formElement=document.getElementById("form");
var form=new FormData(formElement);
form.append("username","qiangzi");
xhr.send(form);
</script>