為什么 event.target.files[0].name 在我的代碼中顯示錯誤？

Question

我有這個 JS 代碼（如下所示），它將 JSON 文件轉換為 XML 文件。 一切正常（我得到了文件的內容），但現在我想獲取上傳文件的文件名。

function onChange(event) {
        var reader = new FileReader();
        reader.onload = (event)=>{
          let data = JSON.parse(event.target.result);
          $("#jsonArea").val(event.target.result);
          var finalXML = '<root>' + x2js.json2xml_str($.parseJSON(event.target.result)) + '</root>';
          var finalName = event.target.files[0].name; //setting it here
          $("#xmlArea").val(finalXML);

          finalXML = finalXML.split('FORM3CA').join('FORM3CB');
          finalXML = finalXML.split('F3CA').join('F3CB');
          finalXML = finalXML.split('<CreationInfo>')[0] + '<CreationInfo><SWVersionNo>1.0</SWVersionNo><SWCreatedBy>SW20000</SWCreatedBy><JSONCreatedBy>SW20000</JSONCreatedBy><JSONCreationDate>2021-11-21</JSONCreationDate><IntermediaryCity>311</IntermediaryCity></CreationInfo>' + finalXML.split('</CreationInfo>')[1]
          finalXML = finalXML.split('I_We1').join('I_We');
          
          console.log(finalName); //here
        }
        reader.readAsText(event.target.files[0]);
    }
 
document.getElementById('file').addEventListener('change', onChange);

有人建議我使用event.target.files[0].name來獲取上傳文件的文件名（@HeryKurniawan 在這篇文章的評論中）。 但是，當我嘗試console.log() finalName變量（如您在上面的代碼中所見）時，它向我顯示了這個錯誤 -

我的代碼有什么問題？ 我也嘗試過使用event.target.file.name和event.target.file[0].name ，但這也不起作用。 請指導...謝謝：:)

Answer 1

您正在使用兩個具有相同名稱event的事件並嘗試使用它是相同的 scope：

$("#jsonArea").val(event.target.result); // Here is event from FileReader.onload
var finalName = event.target.files[0].name; // Here you try to use event from onChange

所以你面臨名字覆蓋，這就是你得到錯誤的原因。

要解決它，請使用不同的名稱：

    function onChange(event) {
        var reader = new FileReader();
        reader.onload = (frEvent)=>{
          let data = JSON.parse(frEvent.target.result);
          $("#jsonArea").val(frEvent.target.result);
          var finalXML = '<root>' + x2js.json2xml_str($.parseJSON(frEvent.target.result)) + '</root>';
          var finalName = frEvent.target.fileName; //setting it here
          $("#xmlArea").val(finalXML);

          finalXML = finalXML.split('FORM3CA').join('FORM3CB');
          finalXML = finalXML.split('F3CA').join('F3CB');
          finalXML = finalXML.split('<CreationInfo>')[0] + '<CreationInfo><SWVersionNo>1.0</SWVersionNo><SWCreatedBy>SW20000</SWCreatedBy><JSONCreatedBy>SW20000</JSONCreatedBy><JSONCreationDate>2021-11-21</JSONCreationDate><IntermediaryCity>311</IntermediaryCity></CreationInfo>' + finalXML.split('</CreationInfo>')[1]
          finalXML = finalXML.split('I_We1').join('I_We');
          
          console.log(finalName); //here
        }

        reader.readAsText(event.target.files[0]);
    }
 
    document.getElementById('file').addEventListener('change', onChange);

Answer 2

首先，感謝所有回答/評論的人。

---

我通過這樣做得到了我想要的結果 -

finalName = document.getElementById('file').value

非常感謝： ：）