js实现文件上传进度条功能

开发中可能会涉及到需要展示文件上传进度条显示，方便用户知道文件的上传状态。其实进度条展示只需要拿到文件已上传的大小，和被上传文件的总大小即可。废话不多说直接上代码！！

class fileUpload extends XMLHttpRequest {xhr = null;file = {};upStatus = null;formData = null;constructor({ method, url, file }) {super();this.file = file;this.open(method, url, true);//一般情况下文件上传接口都需要token进行身份识别。this.setRequestHeader('token', storage.get("token"));this.formData = new FormData();this.formData.append('file', file);}on({ onProgress, onload, onerror }) {// 文件上传中持续触发this.upload.onprogress = (e) => {onProgress && onProgress(e, this.file);this.upStatus = e;// 分别能获取到文件已经上传大小，及被上传文件总大小。console.log(e.loaded,e.total) // loaded文件已上传大小，total文件总大小};// 文件上传结束触发this.onload = (e) => {onload && onload(e.target);};// 截获上传报错this.onerror = (error) => {console.log(error)};// 执行文件上传this.send(this.formData);return this;}
}/*
* method:请求类型，url:文件上传的接口，file:上传的文件
*/
const fileTttp = new fileUpload({ method: 'POST', url, file });fileTttp.on({onProgress: (e, file) => {console.log(`${(e.loaded/e.total)*100}%`) // 文件上传进度},onload: (data) => {console.log(data,'你的文件上传完毕了！')},onerror: (error) => {console.log(error,'你的文件上传出错了！')}
});

js实现文件上传进度条功能相关推荐

实现文件上传进度条功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
大文件上传进度条显示（仿CSDN资源上传效果） .
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层并显示上传这个过程我这里设置太透明了效果不是很立体文件结构如图: 说明:用到"高山来客" ...
jquery和php上传文件进度条,jQuery实现文件上传进度条特效_jquery
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前 ...
php上传完没进度条_php使用APC实现实时上传进度条功能
这篇文章主要介绍了php使用APC实现实时上传进度条功能,php本身不具备可以带有实时上传进度条功能,但是php提供了一个apc,它可以与php配置实现上传进度条,感兴趣的小伙伴们可以参考一下 php ...
django文件——django + jquery-file-upload上传篇（二）-- 插件实现文件上传+进度条显示 +拖入文件上传...
django + jquery-file-upload 插件实现文件上传+进度条显示 1.model.py class Fujian(models.Model):name = models.CharF ...
大文件上传进度条显示（仿CSDN资源上传效果）
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层并显示上传这个过程我这里设置太透明了效果不是很立体文件结构如图: 说明:用到"高山来客" ...
php大文件上传插件,PHP 大文件上传进度条实现
目前我知道的方法有两种,一种是使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc),另外一种方法是使用PECL扩 ...
html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示
这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,对HTML5上传进度条感兴趣的小伙伴们可以参考一下原本打 ...
html资源文件记载进度条,HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

js实现文件上传进度条功能

js实现文件上传进度条功能相关推荐

最新文章

热门文章