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 ...
随机推荐
- gitbook build 报错
如下图所示 解决方案,通过 everythings 找到 copyPluginAssets.js,然后搜索 confirm,将其值 true –> false 参考链接:https://git ...
- Python 读取 支付宝账单并存储到 Access 中
我有一个很多年前自己写的C#+Access的记账程序,用了很多年,现在花钱的机会多了,并且大部分走的支付宝,于是就想把账单从支付宝网站上下载下来,直接写入到Access,这样就很省心了. 记账程序是长 ...
- boost::make_function_output_iterator报错: C4996
用VS2013运行boost::make_function_output_iterator的官方例子: https://www.boost.org/doc/libs/1_68_0/libs/itera ...
- ASM ClassReader failed to parse class file解决方法
1. 环境信息: Spring 3.2.2, JDK 1.8, Hibernate 3.5.5 2. 运行简单的程序,出现以下错误信息: [2018-05-25 02:36:58,671] Ar ...
- Win10系统的SurfacePro4如何重装系统-3 重装完成之后的系统优化
重装完成之后,还是有很多问题,比如触摸屏的驱动没了,你要接上去鼠标之后操作 由于Surface只有一个USB口,你接了鼠标,就没法接键盘,所以要开启屏幕的软键盘,右击任务栏,勾选显示触摸键盘按钮, ...
- Guava Preconditions 工具参数前置校验
guava 提供 Preconditions 作为代码校验的工具类,用来简化开发中对代码的校验或预处理,在逻辑开始前进行合理性校验,避免参数传入过深导致的数据错误. 并且能够在不符合校验条件的地方, ...
- PL/SQL学习笔记之包
一:包 包是由一组相关的函数,过程,变量,游标等PL/SQL程序设计元素的组合而成的一个PL/SQL程序单元,相当于Java中的类. 包的主要作用是封装:把相同或相似的东西归类,方便维护和管理,提高开 ...
- Visual Studio 2015 update 3各版本下载地址
微软在06月27日发布了Visual Studio 2015 Update 3 .在MSDN中微软也提供下载,而且MSDN的Visual Studio 2015 Update 3与官方免费下载的文件是 ...
- 14.翻译系列：从已经存在的数据库中生成上下文类和实体类【EF 6 Code-First系列】
原文链接:https://www.entityframeworktutorial.net/code-first/code-first-from-existing-database.aspx EF 6 ...
- activiti自己定义流程之整合（四）：整合自己定义表单部署流程定义
综合前几篇博文内容.我想在整合这一部分中应该会有非常多模块会跳过不讲,就如自己定义表单的表单列表那一块,由于这些模块在整合的过程中都差点儿没有什么修改,再多讲也是反复无用功. 正由于如此,在创建了流程 ...