在 HTML 中创建带有进度条的上传文件功能，需要使用 HTML5 中的 File API 和 XMLHttpRequest 对象。具体步骤如下：
在 HTML 中创建一个文件上传的表单，使用 input 标签的 type 属性设置为 "file"。
使用 JavaScript 获取文件上传表单中的文件，使用 FileReader 对象读取文件内容。
创建一个 XMLHttpRequest 对象，并使用 open() 方法设置请求方法和 URL。
使用 send() 方法将文件上传到服务器。
在 XMLHttpRequest 对象上注册 loadstart、progress、abort、error 和 load 等事件处理函数，用于在文件上传过程中更新进度条的状态。
下面是一个基本的 HTML 文件上传示例代码：
<!DOCTYPE html>
<html>
<head>
<title>文件上传示例</title>
</head>
<body>
<form id="upload-form">
<label for="file-input">选择文件:</label>
<input id="file-input" type="file" name="file" />
<button id="upload-button" type="submit">上传文件</button>
</form>
<progress id="progress-bar" max="100"></progress>
<script>
var form = document.getElementById('upload-form');
var fileInput = document.getElementById('file-input');
var progressBar = document.getElementById('progress-bar');
form.addEventListener('submit', function(event) {
event.preventDefault();
// 读取文件
var file = fileInput.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
// 上传文件
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.addEventListener('loadstart', function() {
progressBar.value = 0;
});
xhr.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var percent = (event.loaded / event.total) * 100;
progressBar.value = percent;
}
});
xhr.upload.addEventListener('abort', function() {
alert('上传已中止');
});
xhr.upload.addEventListener('error', function() {
alert('上传失败');
});
xhr.upload.addEventListener('load', function() {
alert('上传成功');
});
xhr.send(file);
});
</script>
</body>
</html>关键词说明：