JS文件上传以及进度条实现

JS文件上传,依靠

这个标签可以完成文件上传的操作,这里就不细说,这里主要说一下进度条的实现。

想要实现进度条我们需要了解一个对象 XMLHttpRequest  ProgressEvent接口

这个接口有3个属性,都是只读的。

  1. ProgressEvent.lengthComputable  表示当前的工作是否是可测量的,如果为false则loaded和total两个接口不可用,一般这个是true
  2. ProgressEvent.loaded 表示已完成的进度,只计算文件本身,不包括HTTP请求的开销
  3. ProgressEvent.total  表示当前工作的总量,只计算文件本身,不包括HTTP请求的开销

下面直接上代码

HTML

    

//进度条

这里有一个表单上传域,以及一个进度条的样式

JS

1、js检测 ev.lengthComputable 进度并开始计算上传进度

2、上传进度百分比= 100*  ev.loaded/ev.total

你可能感兴趣的:(javaScript,HTML+CSS3)