为什么我的代码中使用event.target.files[0].name获取文件名会报错？

• 核心是事件对象作用域冲突：代码里写了两层事件回调，外层是文件选择框的change事件，内层是FileReader的load事件，两个回调的参数都命名为event，内层的event会覆盖外层的变量。
• 内层reader.onload的event.target指向的是FileReader实例，这个对象没有files属性，所以调用event.target.files[0].name必然报错。
• 你尝试的另外两种写法本身不符合API规范：文件选择框的文件列表是复数的files属性，不存在单数file属性。

有两种常用实现方案，更推荐第二种，逻辑更清晰不容易出错：

方案1：区分两个事件对象的命名 #

把两层回调的参数名区分开，避免覆盖：

function onChange(e) {
        var reader = new FileReader();
        reader.onload = (readerEvent)=>{
          let data = JSON.parse(readerEvent.target.result);
          $("#jsonArea").val(readerEvent.target.result);
          var finalXML = '<root>' + x2js.json2xml_str($.parseJSON(readerEvent.target.result)) + '</root>';
          // 这里用外层input事件的e对象获取文件名
          var finalName = e.target.files[0].name;
          $("#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);
        }
        reader.readAsText(e.target.files[0]);
    }
 
document.getElementById('file').addEventListener('change', onChange);

方案2：在外层提前获取文件名 #

在进入FileReader回调前就把文件名存在变量里，不需要在内层操作外层事件对象：

function onChange(event) {
        // 提前获取文件名，后续直接用这个变量即可
        const finalName = event.target.files[0].name;
        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>';
          $("#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);
        }
        reader.readAsText(event.target.files[0]);
    }
 
document.getElementById('file').addEventListener('change', onChange);

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