时间戳

首页 > 解决方案 > 上传excel文件时显示进度条

javascript - 上传excel文件时显示进度条

问题描述

我正在尝试制作包含上传 excel 并将数据存储在数据库中的网络。上传 excel 数据时，我想显示进度条，因为通常它会占用大文件。截至目前，我阅读了 excel 文件并用XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName], {defval: ""});

我已经尝试过来自互联网的解决方案，但这只是简单的活动，比如上传将它放在另一个文件夹中，我想制作进度条，其中进度条的值指示已经解析了多少行。但是XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName], {defval: ""});它会一次性解析所有行，因此进度条会立即从 0 变为 100。

你们能帮我吗，如何在这种情况下制作进度条，或者你们知道如何不一次逐行解析excel吗？

顺便说一句，我正在用 php 和 javascript 构建它

$("#fileUploader").change(function(evt) {
  document.getElementById("progressBar").value = 0;
  document.getElementById("status").innerHTML = "Uploading ...";
  var selectedFile = evt.target.files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    var data = event.target.result;
    var workbook = XLSX.read(data, {
      type: 'binary'
    });

    workbook.SheetNames.forEach(function(sheetName) {
      var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName], {
        defval: ""
      });
      var json_object = JSON.stringify(XL_row_object);
      $.ajax({
        type: "POST",
        url: "add.php",
        data: {
          json: JSON.stringify(XL_row_object)
        }
      });
      var percent = (event.loaded / event.total) * 100;
      document.getElementById("progressBar").value = Math.round(percent);
    })
  };

  reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
  };

  reader.readAsBinaryString(selectedFile);
});
<label for="myfile">Select a file:</label>
<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="fileUploader" id="fileUploader"><br>
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <h3 id="status"></h3>
</form>

PS：我不知道如何放置 xlxs 脚本，所以如果你在这里运行会出错

标签： javascriptphphtmljquery

解决方案

$("#fileUploader").change(async evt => {
  const [progressBar, status] = document.querySelectorAll('#progressBar, #status')
  progressBar.value = 0
  status.innerText = 'Uploading'

  const [selectedFile] = evt.target.files;
  const data = await selectedFile.arrayBuffer()
  const workbook = XLSX.read(new Uint8Array(data), {
    type: 'array'
  })

  workbook.SheetNames.forEach(sheetName => {
    const XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName], {
      defval: ""
    });
    const json = JSON.stringify(XL_row_object)
    const xhr = new XMLHttpRequest()
    xhr.upload.onprogress = evt => {
      const percent = (evt.loaded / evt.total) * 100;
      progressBar.value = Math.round(percent)
    }
    xhr.send(json)
  })
})

推荐阅读