原生JS实现文件上传和监视上传进度（实现进度条）

最新推荐文章于 2023-07-04 09:20:58 发布
最新推荐文章于 2023-07-04 09:20:58 发布
阅读量5.1k 收藏 22
点赞数 3
分类专栏： 前端 文章标签： javascript 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_xiang_xiang/article/details/119829616
版权

实现结果

在这里插入图片描述

小demo地址：https://gitee.com/huangxx678/fileuploadbar.git

立个Flag：等我好好学完后端再重新写个完整的 ^ _ ^

先验知识点

MDN:FormData
FormData 接口可以把表单数据构造成键值对，然后通过 XMLHttpRequest.send() 发送。

MDN:XMLHttpRequest
progress 事件，监测传输进度，e.lengthComputable 表示当前传输文件的长度是否可知，e.loaded 表示已经传输的字节数，e.total 表示总字节数，以此计算当前进度条长度

MDN:FileList
input 标签的 type 属性为 file 时，可以通过 inputElement.files[0] 获取上传的一个文件

代码

前端 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="center" style="width:404px;margin:100px auto;">
        <div id="file" style="
最低0.47元/天 解锁文章
H_xiang_xiang
关注
  • 3
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js下载文件并监听下载进度
烫一壶女儿红
06-25 6024
需求是做一个根据文件的url地址下载文件的功能，但是对于大文件来说下载周期较长，等待时间页面无反应，体验不够好，这时候就需要获取到文件的下载进度。查阅了相关资料，这里做一些记录。 /** * 将url文件下载到本地 * @param fileUrl {String} 文件链接 * @param fileName {String} 文件名字 * @return void */ async function downloadFile(fileUrl,fileName) { let blob = await
文件上传进度案例
奇奇怪怪
12-13 2067
上传进度条它来了！！！
CSS day12 移动端布局练习
qq_34620296的博客
09-13 728
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
vue上传文件并显示进度条
IT菜鸟
07-29 1万+
keepFileList 用来备份选择的文件列表，因取消下载后文件列表会被清空，导致不能继续上传。手动使用submit()上传。
java上传文件页面显示上传进度
FurtherSkyQ的博客
08-02 5847
本文介绍两种上传方式来获取进度条，第一种是论坛里写的比较用心的博客（我将这些博客又细分了一下，主要为了避坑），第二种方式是一base64的方式上传和接收的。 目录 第一种上传方式file对象的方式 1 准备SSM的Maven环境，也就是jar包的准备 2 前端页面 引入BootStrap的样式 3.上传页面（传统的上传组件，在上传过程中，你要获得上传文件对象） JS代码部分 后端代...
JS文件上传以及进度条实现
心有猛狗
09-05 1万+
JS文件上传，依靠 &lt;input type="file"&gt; 这个标签可以完成文件上传的操作，这里就不细说，这里主要说一下进度条的实现。 想要实现进度条我们需要了解一个对象 XMLHttpRequest  ProgressEvent接口 这个接口有3个属性,都是只读的。 ProgressEvent.lengthComputable  表示当前的工作是否是可测量的，如果为fal...
原生js实现文件上传、下载、封装等实例方法
01-21
一 、下载 1、代码 const fileDownloadClick = (obj) => { // 解决兼容 if( document.all ){ obj.click(); } else { let event = document.createEvent(MouseEvents); event.initEvent('click', true, true);...
原生javascript实现文件异步上传的实例讲解
10-19
下面小编就为大家带来一篇原生javascript实现文件异步上传的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
教你3分钟利用原生js实现有进度监听的文件上传预览组件
10-16
本文将详细介绍如何使用原生JavaScript创建一个具有进度监听功能的文件上传预览组件。这个组件利用了FileReader API来实现在前端解析、预览文件，并且能够监听到文件读取的进度。同时，它还提供了对外的API接口，...
原生JS上传大文件显示进度条 php上传文件代码
11-27
JS原生上传大文件显示进度条，php上传文件，供...原生JS大文件显示进度条</title> <meta charset="UTF-8"> <style type="text/css"> #parent{position: relative;width: 500px;height:20px;bord
原生JS上传文件，获取文件二进制数据及文件大小和文件名称
07-07
本知识点将深入探讨如何使用原生JavaScript实现文件上传，获取文件的二进制数据、大小以及文件名称。 首先，我们需要一个HTML元素，通常是`<input type="file">`，用于让用户选择要上传的文件。例如： ```html ``...
java oss 简单上传，分片上传（加进度条），（流式）下载文件
Lauuii_的博客
03-22 7564
1，前端调用接口实现下载 @GetMapping(value = "/downloadFile") public void downloadFile(@RequestParam String ossPath, HttpServletResponse response) { BufferedInputStream input; OutputStream outputStream; OSS ossClient = OssUtil.getOssBean.
js获取文件实时上传进度，制作文件上传进度条
m0_65041204的博客
05-24 3019
通过已上传的文件大小和文件总大小计算得到文件上传实时进度，
springboot上传文件显示上传进度
weixin_44021888的博客
10-17 3834
springboot上传文件显示上传进度
vue项目实现上传进度条
qq_46344419的博客
07-04 3151
vue项目实现上传进度条
上传/下载进度条实现
qq_45428582的博客
09-20 1398
上传下载进度事实上是使用到了xmlhttprequset对象中的progress事件。 对于下载，可在xhr.onprogress上做监听。 对于上传，可在xhr.upload.onprogress上做监听。 监听事件要在xhr.open(method,url)前进行绑定。 为了保证正确执行，必须在调用 open()之前添加 onprogress 事件处理程序。–《JavaScript高级程序指南v4》 究其原因，可能是由于，xhr.open实现的功能是定义本次请求，xhr.send仅仅是将定义好的请求
原生js使用FormData上传文件并监听进度(附前后端实现源码)
zhaoolee的CSDN博客
06-09 1977
在ajax1.0时代, 是无法直接上传文件的, 到了ajax2.0时代, 新增了FormData, 我们就可以用FormData完成文件的上传 以前我们用form表单中的<input type="file"/>实现文件上传, 但前端无法实时查看上传的进度, 而ajax2.0可以让我们实时监控上传进度 下面是一个原生js使用ajax 完成 FormData上传文件, 并...
如何使用vscode的终端（保姆级）
热门推荐
H_xiang_xiang的博客
06-03 2万+
1、装 Code Runner 插件 2、顶部工具栏 终端->新终端->选择当前工作文件夹 3、搞一个输出测试一下（右键->run code），ok 4、咦，终端为何如此 5、找到vs程序图标，右键->属性->目标这一栏末尾 一个空格之后 追加 --disable - gpu 6、 重启vscode，okk！ ...
原生js实现文件上传
最新发布
09-02
可以使用原生 JavaScript 实现文件上传，以下是一个基本的示例： HTML 代码： ```html <input type="file" id="file-upload" /> <button onclick="uploadFile()">上传文件</button> ``` JavaScript 代码： ```javascript function uploadFile() { var input = document.getElementById('file-upload'); var file = input.files[0]; var formData = new FormData(); formData.append('file', file); var request = new XMLHttpRequest(); request.open('POST', 'your-upload-url', true); request.onreadystatechange = function() { if (request.readyState === XMLHttpRequest.DONE && request.status === 200) { // 文件上传成功的处理逻辑 console.log(request.responseText); } }; request.send(formData); } ``` 上述代码中，我们首先获取了文件上传表单元素和文件对象。然后，创建一个 FormData 对象，并将文件对象添加到其中。接下来，创建一个 XMLHttpRequest 对象，并使用 `open` 方法指定上传的 URL、请求方式等参数。 在 `onreadystatechange` 事件中，我们检查请求的状态是否为完成状态（`XMLHttpRequest.DONE`）且响应状态码是否为 200（表示成功）。如果满足条件，表示文件上传成功，可以在这里处理成功的逻辑。 最后，通过调用 `send` 方法发送请求，将文件上传到指定的 URL。请将 `'your-upload-url'` 替换为实际的上传地址。 注意：由于涉及到跨域请求，请确保上传地址的配置允许跨域请求。另外，此代码示例基于原生 JavaScript 实现，没有使用任何框架或库。如果你使用的是某个特定的框架或库，可能会有相应的上传方法或插件可用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值