css上传文件进度条代码

在前端开发中，我们经常需要实现上传文件的功能。为了让用户了解上传的进度，我们需要加入进度条。在CSS中，实现上传进度条的方式比较简单，下面是一份示例代码。
首先，我们需要一个上传按钮和一个显示进度的容器：

<input type="file" id="uploadFile" />
<div id="progressBar"></div> 

然后，我们可以使用CSS样式来定义进度条的样式：

#progressBar{
  height: 10px;
  background-color: #ddd;
  width: 0%;
} 

这段代码定义了进度条的高度、背景和宽度（初始为0）。
接下来，我们需要使用JavaScript来处理上传过程。在上传开始时，我们可以先获取到文件的总大小：

let fileSize = document.getElementById("uploadFile").files[0].size; 

然后，我们在上传的过程中，不断计算已上传的数据量，更新进度条的进度：

xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    let percent = (event.loaded / fileSize) * 100;
    document.getElementById("progressBar").style.width = percent + "%";
  }
}; 

其中，`event.loaded` 表示已经上传的数据量，`percent` 计算出已上传数据量所占总数据量的百分比，根据这个百分比来更新进度条的宽度。
最后，我们可以将所有代码整合起来：

<input type="file" id="uploadFile" />
<div id="progressBar"></div>
<br>
#progressBar{
  height: 10px;
  background-color: #ddd;
  width: 0%;
}
<br>
let fileSize = document.getElementById("uploadFile").files[0].size;
<br>
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    let percent = (event.loaded / fileSize) * 100;
    document.getElementById("progressBar").style.width = percent + "%";
  }
}; 

通过这些代码，我们就可以在前端页面实现一个简单的上传进度条功能了。