ajax 上传文件 进度
时间: 2023-07-25 16:21:38 浏览: 51
实现 AJAX 文件上传进度需要使用 XMLHttpRequest 对象的 upload 属性。以下是一个简单的示例:
HTML 代码:
```
<input type="file" id="file">
<button onclick="upload()">上传</button>
<div id="progress"></div>
```
JavaScript 代码:
```
function upload() {
var file = document.getElementById("file").files[0];
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percent = Math.round((event.loaded / event.total) * 100);
document.getElementById("progress").innerHTML = percent + "%";
}
};
xhr.open("POST", "/upload");
xhr.send(file);
}
```
上述代码中,当文件上传过程中触发 onprogress 事件,我们可以通过 event.loaded 和 event.total 来计算上传进度并更新页面上的进度条。注意,这里必须使用 POST 方法来上传文件,GET 方法不支持上传文件。