简单的实现上传文件进度条

实现文件上传(即input标签的file类型),可以使用XMLHttpRequest对象中的upload属性的progress事件,该事件的事件对象可以返回上传进度相关数据

XMLHttpRequestObject.upload.onprogress = function(e){};

其中e.loaded表示已经上传的数据大小,e.total表示整个文件的大小,用e.loaded除以e.total就可以获取上传的进度

 

那么该如何实现利用XHR传送表单呢?

我们可以利用FormData类对象来对form表单快速转化为键值对的构造方式,并将其作为请求主题发送出去

如下

由于FormData对象已经将form表单数据转化好,所以不再用设置请求头了,此时在服务器端就可以通过表单元素的name属性值获取表单值

 

综上所述,我们通过以下代码实现简单的文件上传进度条




	
	Document
	


	

  步骤总结:

  1. 将包含有file类型的表单通过FormData构造函数格式化
  2. 创建XMLHttpRequest对象并设置发送方式(post)和请求网址
  3. 设置上传进度事件,利用其事件对象获取上传进度百分比并改变进度条长度
  4. 发送请求主题

 

你可能感兴趣的:(简单的实现上传文件进度条)