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 ...
随机推荐
- Visual Studio 2015编译Lua 5.3.4遇到的坑
被坑的不浅,遇到错误:" LNK1561:必须定义入口点",解决方案删除再建,步骤一遍一遍操作,还是报错.如下图所示: 首先,它必须要改成DLL或者LIB(动态/静态库),如果是应 ...
- lua的性能优化
Roberto Ierusalimschy写过经典的Lua 性能提示的文章,链接地址>> 我通过实际的代码来验证,发现一个问题.当我使用 LuaStudio 运行时,发现结果反而与提示相反 ...
- oracle显示一个月的所有天数
效率高: ) s_date from dual connect 效率低: select to_date() s_date from all_tables where rownum <= ( fr ...
- C# websocket与html js实现文件发送与接收处理
C# websocket与html js实现文件发送与接收处理 using System; using System.Collections.Generic; using System.Linq; u ...
- [转]如何实现一个malloc
任何一个用过或学过C的人对malloc都不会陌生.大家都知道malloc可以分配一段连续的内存空间,并且在不再使用时可以通过free释放掉.但是,许多程序员对malloc背后的事情并不熟悉,许多人甚至 ...
- activiti自己定义流程之整合（四）：整合自己定义表单部署流程定义
综合前几篇博文内容.我想在整合这一部分中应该会有非常多模块会跳过不讲,就如自己定义表单的表单列表那一块,由于这些模块在整合的过程中都差点儿没有什么修改,再多讲也是反复无用功. 正由于如此,在创建了流程 ...
- 使用GoAccess构建简单实时日志分析系统
很早就知道Nginx日志分析工具GoAccess,但之前由于只能静态分析,感觉不太强大.最近发现它能够实时显示报表而且报表也比之前强大很多能做趋势分析.因此果断下载安装.以下是基于CentOS的安装配 ...
- MySQL入门很简单-触发器
1.触发器是由事件来触发某个操作,这些事件包括insert语句.update语句和delete语句.当数据库系统执行这些事件时,会激活触发器执行相应操作.MySQL从5.0.2开始支持触发器.使用触发 ...
- Linux好用的工具命令 - rz/sz
Linux系统中将本地的文件上传到服务器或者从服务器上下载文件到本地可以通过安装lrzsz工具来简单便利的完成. >>RZ :将本地的文件上传到服务器 >>SZ:从服务器上下载 ...
- Node.js 反序列化漏洞远程执行代码（CVE-2017-5941）
2.1 摘要 2.1.1 漏洞介绍 漏洞名称: Exploiting Node.js deserialization bug for Remote Code Execution 漏洞CVE id: C ...