为啥 event.target.files[0].name 在我的代码中显示错误？

Posted 2023-03-28

【中文标题】为啥 event.target.files[0].name 在我的代码中显示错误？

【英文标题】：Why is event.target.files[0].name showing error in my code?为什么 event.target.files[0].name 在我的代码中显示错误？

【发布时间】：2022-01-06 22:25:53

【问题描述】：

我有这个将 JSON 文件转换为 XML 文件的 JS 代码（如下所示）。一切正常（我得到了文件的内容），但现在我想获取上传文件的文件名。

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 在this 帖子的 cmets 中）。但是，当我尝试console.log()finalName 变量时（如您在上面的代码中所见），它向我显示了这个错误 -

我的代码有什么问题？我也尝试过使用event.target.file.name 和event.target.file[0].name，但这也不起作用。请指导...谢谢！ :)

【问题讨论】：

因为 files[0] 未定义。您可能没有选择任何文件。

您是否尝试过以不同的方式从两个事件中命名您的event？因为现在您尝试访问 FileReader 的 event.target.files[0].name 并且它没有该属性

嗨@GoldenretriverYT - 我发布的错误仅在我选择文件后出现。这是更详细的屏幕截图 - i.ibb.co/xgF75Vd/image.png ；请看一下:)

嗨@Justinas - 感谢您的回复，但不幸的是我不知道这意味着什么 - 您可以在此处提供示例/链接相关帖子吗？那会很有帮助...谢谢！

【参考方案1】：

您正在使用两个具有相同名称 event 的事件并尝试在相同的范围内使用它：

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

【参考方案2】：

首先，感谢所有回答/评论的人。

---

我通过这样做得到了我想要的结果 -

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

非常感谢！ :)