js上传文件显示进度条
时间: 2023-07-16 21:13:33 浏览: 71
要显示上传文件的进度条,可以使用 XMLHttpRequest 对象来实现。以下是一个简单的示例代码:
HTML 代码:
```
<input type="file" id="fileInput">
<button onclick="uploadFile()">上传</button>
<div id="progressBar"></div>
```
JavaScript 代码:
```
function uploadFile() {
var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.upload.addEventListener("progress", function(event) {
var progressBar = document.getElementById("progressBar");
progressBar.value = event.loaded / event.total * 100;
});
xhr.send(file);
}
```
在上面的示例代码中,我们首先获取了文件输入框中选择的文件,然后创建了一个 XMLHttpRequest 对象并打开了 POST 请求。
然后,我们使用 `xhr.upload.addEventListener` 方法来监听上传进度事件,并在事件回调函数中更新进度条的值。
最后,我们调用 `xhr.send` 方法将文件发送到服务器。
注意,上述代码仅提供了基本的上传进度条功能,如果你需要更丰富的功能,比如上传取消、上传失败处理等,还需要进行额外的处理。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)