表单上传可以分为两种方式，一种是文本消息上传，另一种则是文件上传。

文本消息上传，例如登录时的用户名，密码传给服务器；文件上传，例如完善个人信息之类的上传个人照片。

其中，根据上传的方式，我们又可以分为两种方法，分别是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>