图片上传显示进度条和预览图的前端实现之进度条篇

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

zzxboy1

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

阅读量7.1k

点赞数

分类专栏： JS 文章标签：前端图片上传 progress event

本文链接：https://blog.csdn.net/zzxboy1/article/details/72638071

版权

本文介绍了前端如何实现图片上传时的进度条功能。通过利用HTML的`<input type='file'>`结合`progress`和`event`事件，使用ProgressEvent的属性lengthComputable、loaded和total计算上传进度，从而动态更新进度条。文章提到了当lengthComputable为true时，可以通过loaded与total的比例创建进度条效果。预览图的实现将在后续篇章中分享。

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

很久没有写博客了，是最近忙着找实现，另外工作也很忙，闲下来整理一下最近做的东西，觉得还是有点可写的。
不知道有没有朋友在工作中碰到这样的需求，需要实现一个组件，能实现图片上传功能，同时，在图片未上传完成时，要显示进度条和相应的图片预览图。
如图所示，上传过程中，进度条和预览图都能显示：

这一篇首先来说说点击上传功能和进度条功能的实现吧，等今天忙完了我继续更新下一篇

点击弹出文件夹，选择上传的功能想必我不说很多朋友即使没接触过也有所了解，就是要依靠<input type="file"> ，当然也可以指定accept来制定只允许上传某些类型的文件，比如图片你可以指定只允许accept="image/jpeg,image/jpg,image/png,image/x-png,image/gif"
至于进度条事件就依赖于progressEvent对象来实现，progressEvent实际上在XMLHttpRequest对象的progress事件和loaded事件都能通过event访问到，可以认为它继承了Event对象并扩展了一些