JS触发隐藏file输入框onchange时files[0]返回undefined问题

这是浏览器默认的安全策略限制导致的：
当<input type="file">被设置为display:none完全从渲染树移除时，通过JS手动调用.click()触发的文件选择行为，会被浏览器判定为「非用户主动发起的、存在诱导上传风险的操作」。这种场景下浏览器虽然会正常触发onchange事件，但会主动拦截JS对files属性的访问，返回空的文件集合，所以读取files[0]时会拿到undefined。
如果控件是可见状态，用户直接点击控件选择文件属于明确的主动交互，浏览器不会做这个拦截，所以功能正常。

你可以任选以下一种方案解决，都是生产环境验证过的稳定写法：

• 方案1：替换隐藏样式，不要用display:none
  改用视觉上不可见、但元素仍保留在渲染流中可被浏览器识别为可交互控件的CSS类，这种写法不会触发安全拦截：

  .hidden-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
  

  把input上的style="display:none"替换为引用这个类即可：

  <input type="file" onchange="ValidateGP();return false;" ID="FUFitxer" class="hidden-file-input" />
  

• 方案2：用label原生关联触发，不需要写JS模拟点击
  label元素和file input通过for属性绑定后，点击label会原生触发关联input的文件选择，这个是浏览器认可的正常用户交互，哪怕input设置了display:none也能正常读取文件信息：

  <!-- 把这个元素做成你需要的上传按钮样式即可 -->
  <label for="FUFitxer">上传文件</label>
  <input type="file" onchange="ValidateGP();return false;" ID="FUFitxer" style="display:none" />
  

  这种写法可以删掉原来的PujarFitxerGP模拟点击函数，兼容性最好。
• 方案3：调整触发逻辑的调用时机
  如果一定要保留display:none和JS触发点击的写法，要确保PujarFitxerGP()是直接绑定在用户点击事件的同步回调里执行的，不要放在setTimeout、接口请求回调等异步队列里触发，部分浏览器对异步触发的文件选择也会做安全拦截。

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