上传 excel 文件时显示进度条

Question

i'm trying to make web that include uploading excel and store the data in database. when uploading the excel data, i would like to display progress bar because usually it will take large file. As of now i read the excel file and parsing it with XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName], {defval: ""});

I have already tried solution from internet, but it all just simple activity like upload to put it in another folder, i would like to make progress bar where the value of progress bar indicate how many row have been parsed. but with XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName], {defval: ""}); it parsing all of the row in once so the progress bar will go from 0 to 100 at once.

can you guys please help me, how to make progress bar with this situation or do you guys know how to parsing excel row by row not at once?

btw, i'm building it with php and 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: i don't know how to put the xlxs script so you will get an error if you run in here

Answer 1

$("#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)
  })
})