Form表单上传

 

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

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

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

 

—— 完 ——
相关推荐
评论

立 为 非 似

中 谁 昨 此

宵 风 夜 星

。 露 , 辰

文章点击榜

细 无 轻 自

如 边 似 在

愁 丝 梦 飞

。 雨 , 花