在前端开发中,我们经常需要实现上传文件的功能。为了让用户了解上传的进度,我们需要加入进度条。在CSS中,实现上传进度条的方式比较简单,下面是一份示例代码。 首先,我们需要一个上传按钮和一个显示进度的容
<input type="file" id="uploadFile" /> <div id="progressBar"></div>
#progressBar{ height: 10px; background-color: #ddd; width: 0%; }
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 + "%"; } };
<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 + "%"; } };
粉丝
0
关注
0
收藏
0