ajax 上传文件，监听进度（progress）
前端代码 github
<body class="m-2">
<label for="a" class="btn btn-primary">点击上传</label>
<input id='a' name="file" type="file" accept="image/png, image/jpeg, video/*" style="display:none;" multiple='multiple'>
<script>
async function main() {
const l = console.log
let fileEle = document.querySelector('#a')
fileEle.onchange = e => {
let files = fileEle.files
if(files.length === 0) return false;
let data = new FormData()
for(const file of files){
data.append('files', file)
}
let xhr = new XMLHttpRequest()
xhr.upload.addEventListener('progress', e => {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
l(`${percentage}%`)
}
})
xhr.open('post', 'http://localhost:5000/upload')
xhr.responseType = 'json'
xhr.send(data)
xhr.upload.addEventListener('loadstart', e => {
l('上传开始')
})
xhr.upload.addEventListener('error', e => {
l('上传失败')
})
xhr.upload.addEventListener('abort', e => {
l('上传终止')
})
xhr.upload.addEventListener('timeout', e => {
l('由于预设时间到期，上传终止')
})
xhr.upload.addEventListener('load', e => {
l('上传成功了')
})
xhr.upload.addEventListener('loadend', e => {
l('上传已经停止了')
})
xhr.onload = () => {
l(...xhr.response.imgsSrc);
}
}
}
main();
</script>
</body>
</html>
后台代码片段
@Post('upload')
@UseInterceptors(FilesInterceptor('files'))
uploadfile(@UploadedFiles() files, @Body() body) {
if (!files || files.length === 0) {
throw new HttpException('参数错误', HttpStatus.FORBIDDEN)
}
let imagesSrc = []
for (const file of files) {
const imgName = `${Date.now()}-${file.originalname}`
const writeImage = createWriteStream(join(__dirname, '..', 'upload', imgName))
writeImage.write(file.buffer)
imagesSrc.push( `http://localhost:5000/images/${imgName}` )
}
return {
imgsSrc: imagesSrc
}
}
ajax 上传文件，监听进度（progress）的更多相关文章
- ajax 上传文件，显示进度条，进度条100%，进度条隐藏，出现卡顿就隐藏进度条，显示正在加载，再显示上传完成
<form id="uploadForm" method="post" enctype="multipart/form-data"&g ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- ajax上传文件及进度显示
之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...
- HTML5 jQuery+FormData 异步上传文件，带进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...
- atitit.ajax上传文件的实现原理 与设计
atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2. 传统的html4 + ajax 是无法直 ...
- Spring Boot上传文件（带进度条）
Spring Boot 上传文件(带进度条)# 配置文件 spring: freemarker: template-loader-path: classpath:/static/ ##Spring B ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- springMVC+jsp+ajax上传文件
工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...
- 伪ajax上传文件
伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...
随机推荐
- history.go(-1)和History.back()的区别
简单的说就是:go(-1): 返回上一页,原页面表单中的内容会丢失:back(-1): 返回上一页,原页表表单中的内容会保留,一般还是back(-1)用的多
- 集合总结--ArrayList、LinkedList、HashMap
一.概述 ArrayList:数组集合. 查询.修改.新增(尾部新增)快,删除.新增(队列中间)慢,适用于查询.修改较多的场景. LinkedList:双向链表集合.查 ...
- C# Barrier 实现
当您需要一组任务并行地运行一连串的阶段,但是每一个阶段都要等待所有其他任务都完成前一阶段之后才能开始,你一通过Barrier实例来同步这一类协同工作.Barrier初始化后,将等待特定数量的信号到来, ...
- 每天一个linux命令(17):whereis
1.命令简介 whereis (whereis) 命令用来定位指令的二进制程序.源代码文件和man手册页等相关文件的路径. whereis命令只能用于程序名的搜索,而且 ...
- [C#] 解决Silverlight反射安全关键（SecuritySafeCritical）时报“System.MethodAccessException: 安全透明方法 XXX 无法使用反射访问”的问题
作者: zyl910 一.缘由 在Silverlight中使用反射动态访问时,经常遇到"System.MethodAccessException: 安全透明方法 XXX 无法使用反射访问-- ...
- 2018年中国C++大会详细日程+报名
http://purecpp.org/detail?id=2050
- iptables转发技术
NAT 一. 什么是 NAT NAT(Network Address Translation)译为网络地址转换.通常路由器在转发我们的数据包时,仅仅会将源MAC地址换成自己的MAC地址,但是NAT技术 ...
- 【Unity】微信支付SDK官方安卓Demo的使用问题
Unity3d使用微信支付是属于APP内发起支付调用的情况,其本质上是在安卓项目上使用微信SDK,安卓项目开发完成后再导入到Unity中作为Unity插件使用,即Unity中C#调用安卓(Java)代 ...
- shell脚本自动登录服务器
#!/bin/sh function trapper(){ trap 'exit 1' EXIT QUIT; } serverArr=( guard-boot-001,10.1.17.12 guard ...
- perl控制流介绍(if条件，while,for循环,foreach)
1. 语句块:{ }之间的部分即为BLOCK语句块. 2. 条件语句:if ( expression ) BLOCK; if ( expression ) BLOCK1else BLOCK2 ...