Js 实现带进度条的上传文件预览

最新推荐文章于 2024-07-22 15:51:01 发布

小辣抓

最新推荐文章于 2024-07-22 15:51:01 发布

阅读量3.6k

点赞数 1

分类专栏： javascript Javascript ！！！

本文链接：https://blog.csdn.net/HaoDaWang/article/details/79044095

版权

本文介绍了如何使用JavaScript实现带进度条的文件上传预览功能。通过监听input的change事件获取文件对象，利用FileReader的readAsDataURL方法读取文件并将其转化为dataURL，以实现图片预览。同时，通过监听progress事件获取上传进度，并计算出进度条的当前进度。代码示例和运行效果一并给出。

摘要由CSDN通过智能技术生成

Js 实现带进度条的上传文件预览

前面说了File对象是Blob对象的子类，在html里每出现一个type为file的input标签，在解析dom结构的时候，这个标签就不单单只是一个input DOM对象，而是会被对应着一个fileUpload对象，通过fileUpload.files我们可以获得一个fileList对象，fileList对象是一个文件列表，里面包含需要上传的文件对象，通过文件列表我们可以拿到我们需要的文件对象，由此拿到该文件的一些信息。我们可以先看一下可以拿到哪些信息

写一个简单的上传文件的表单：
index.html

<!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-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <input type="file" id="file"/>
        <input type="submit" value="submit">
    </form>
</body>
</html>

通过监听input的change事件获取文件对象

let fileInput = document.querySelector('#file')

fileInput.addEventListener('change',() => console.log(fileInput.files[0]))

这里写图片描述

从打印的结果可以看出，可以拿到的的信息有：

最近修改时间 lastModified（时间戳）
最近修改时间 lastModified（时间对象）</

最低0.47元/天解锁文章

小辣抓

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Js 实现带进度条的上传文件 预览

Js 实现带进度条的上传文件 预览

Js 实现带进度条的上传文件预览

Js 实现带进度条的上传文件预览