js上传图片显示进度条

基础概念

在JavaScript中实现图片上传并显示进度条，主要涉及以下几个概念：

File API：允许网页与用户的文件系统进行交互，可以读取用户选择的文件。
XMLHttpRequest 或 Fetch API：用于发送HTTP请求，上传文件到服务器。
进度事件（Progress Events）：在文件上传过程中，浏览器会触发一系列进度事件，如loadstart, progress, load, loadend等，可以用来更新进度条。

类型与应用场景

类型：通常使用基于HTML5的进度条或者自定义的进度条样式。
应用场景：适用于任何需要上传文件的Web应用，如社交媒体平台上传图片、在线商城上传商品图片等。

示例代码

以下是一个简单的示例，展示如何使用JavaScript实现图片上传并显示进度条：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片上传进度条</title>
<style>
  #progressBar {
    width: 100%;
    background-color: #ddd;
  }
  #progress {
    width: 0%;
    height: 30px;
    background-color: #4CAF50;
    text-align: center;
    line-height: 30px;
    color: white;
  }
</style>
</head>
<body>

<input type="file" id="fileInput">
<button onclick="uploadFile()">上传图片</button>
<div id="progressBar">
  <div id="progress"></div>
</div>

<script>
function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const xhr = new XMLHttpRequest();
  const progressBar = document.getElementById('progress');

  xhr.upload.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      progressBar.style.width = percentComplete + '%';
      progressBar.textContent = percentComplete.toFixed(2) + '%';
    }
  });

  xhr.open('POST', '/upload', true);
  xhr.send(file);
}
</script>

</body>
</html>