ajax 上传文件,监听进度(progress)
2023-09-14 08:58:45 时间
前端代码 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
}
}
相关文章
- 文件分片上传原理
- axios 上传文件 封装_使用axios上传文件,如何取消上传
- Vue实现文件上传和文件下载
- 在线客服系统源码开发实战总结:动态加载js文件实现粘贴一段js的sdk代码,直接引入插件效果
- php案例 文件上传并预览
- 如何处理Xcode上传IPA文件后无法在后台架构版本中显示的问题?
- python-Django-文件上传(二)
- springmvc上传文件BadRequest异常详解编程语言
- 上传文件至Linux服务器:一步一步来(向linux服务器上传文件)
- AJAX文件上传并显示进度条(案例实战)
- PHP上传文件(附带源码)
- Linux查看文件权限的方法(linux显示文件权限)
- MSSQL实现快速导入SQL文件(mssql导入sql文件)
- Bak文件导入到Oracle数据库的方法(bak导入到oracle)
- 如何使用FSO搜索硬盘文件
- asp.net下实现支持文件分块多点异步上传的WebServices
- asp判断上传文件中是否存在危险代码
- Easy.Ajax部分源代码支持文件上传功能,兼容所有主流浏览器
- struts2中实现多个文件同时上传代码
- php+ajax实现图片文件上传功能实例
- 使用ajaxfileupload.js实现ajax上传文件php版
- ajaxFileUpload.js插件支持多文件上传的方法