Ajax文件上传进度条优化：仅在上传中或完成时显示

你的核心问题在于进度条默认设置了display: block，导致页面加载后就一直显示着。我们只需要调整它的初始状态，再配合上传流程控制显示/隐藏逻辑就能搞定。

具体修改步骤： #

1. 调整进度条的初始隐藏状态 #

先修改HTML里的进度条容器，把默认的display: block改成display: none，让它一开始就隐藏起来：

<div id="progress" style="display: none;width: 200px;padding: 1px 5px;margin: 1px 0;border: 1px inset #446;border-radius: 4px;">
  <div id="progressNumber" style="height:5px;background: lime;"></div>
  <div id="progressValue" style="text-align: center;"></div>
</div>

2. 上传开始时显示并重置进度条 #

在uploadFile函数里，发起请求前先把进度条显示出来，同时重置进度条的状态（避免残留上次上传的进度信息），还可以加个文件选择判断优化体验：

function uploadFile() {
  /* 启动XMLHttpRequest。选择文件后在此发起请求，监听事件并调用服务器端文件 */
  var fd = new FormData();
  var fileInput = document.getElementById('fileToUpload');
  
  // 先判断是否选择了文件
  if (!fileInput.files[0]) {
    alert("请先选择要上传的文件！");
    return;
  }
  
  fd.append("fileToUpload", fileInput.files[0]);
  
  // 重置进度条状态并显示
  var progressContainer = document.getElementById('progress');
  var progressBar = document.getElementById('progressNumber');
  var progressText = document.getElementById('progressValue');
  progressBar.style.width = '0%';
  progressText.innerHTML = '';
  progressContainer.style.display = 'block';

  var xhr = new XMLHttpRequest();
  xhr.upload.addEventListener("progress", uploadProgress, false);
  xhr.addEventListener("load", uploadComplete, false);
  xhr.addEventListener("error", uploadFailed, false);
  xhr.addEventListener("abort", uploadCanceled, false);
  xhr.open("POST", "files/import_vevo_xls.php");
  xhr.send(fd);
}

3. 可选：上传结束后控制进度条状态 #

如果你希望上传完成/失败/取消后，进度条保持显示（让用户看到最终状态），那不需要额外修改；如果希望上传结束后自动隐藏，可以在对应的回调函数里添加隐藏逻辑：

比如在uploadComplete中添加：

function uploadComplete(evt) {
  document.getElementById('progressNumber').style.width = '100%'; /* 图形显示 */
  document.getElementById('progressValue').innerHTML = '100%'; /* 数值显示 */
  alert(evt.target.responseText);
  // 可选：上传完成后隐藏进度条
  // document.getElementById('progress').style.display = 'none';
}

同样的，在uploadFailed和uploadCanceled里也可以添加相同的隐藏代码：

function uploadFailed(evt) {
  alert("错误，上传失败。");
  // 可选：失败后隐藏进度条
  // document.getElementById('progress').style.display = 'none';
}
function uploadCanceled(evt) {
  alert("上传已被浏览器中断。");
  // 可选：取消后隐藏进度条
  // document.getElementById('progress').style.display = 'none';
}

这样修改后，进度条就只会在上传进行中或完成时显示，完全符合你的需求啦！

内容的提问来源于stack exchange，提问作者KissTom87