前端 JavaScript 获取上传文件进度实现进度条展示

最新推荐文章于 2024-04-19 09:59:13 发布

CSDN_33901573

最新推荐文章于 2024-04-19 09:59:13 发布

阅读量455

点赞数

分类专栏： JavaScript 文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/CSDN_33901573/article/details/131707352

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

该文展示了如何在React应用中创建一个进度条组件，通过CSS定义样式，JavaScript处理文件上传进度，并利用useState管理状态来更新进度条的宽度，实现动态显示上传进度。

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

html 部分

// 本段是 React 写法
<div className='progress tea-mt-3n'>
   <div style={{ width: progressWidth + '%' }} className='child'></div>
</div>

css 部分

.progress {
    height: 20px;
    border: 1px solid rgba(176, 176, 176, 0.46);
    .child {
      height: 100%;
      background-color: #01c032;
    }
  }

js 函数体部分

const [uploadingFileList, setUploadingFileList] = useState([]);
const [isUploading, setIsUploading] = useState(null);
const [progressWidth, setProgressWidth] = useState(0);

function onUploadStart(file, { xhr }) {
    temUploadFileList = [
      ...temUploadFileList,
      {
        id: file.id,
        name: file.name,
        size: file.size,
        status: 'pending',
        xhr: xhr,
      },
    ];
    xhr.upload.onprogress = function(e){
      if(e.lengthComputable){
        // 当调用函数后这里会设置进度条的宽度值, 从而实现进度条效果
        setProgressWidth((e.loaded/e.total)*100);
        console.log('当前上传进度'+Math.round((e.loaded/e.total)*100)+'%')
      }
    };
    setUploadingFileList(temUploadFileList);
    setIsUploading(true);
  }

喜欢请点赞关注!!! 有问题请留言, 私信。感谢支持!