咨询：JavaScript实现文件上传功能的替代代码方案

你当前用的是label关联input的方式，以下是几种不同的实现思路：

1. 用JavaScript主动触发input的点击事件 #

可以将文件输入框隐藏，通过按钮、文字等任意元素绑定点击事件，主动调用input的click()方法打开文件选择框：

基础实现（内联事件） #

<div>
  <input 
    id="test-id" 
    type="file" 
    accept="jpg" 
    style="position: absolute; left: -9999px;"
    @change=${async (e: Event) => {
      await this.handleImages(e.target as HTMLInputElement, roles);
    }}
  />
  <button onclick="document.getElementById('test-id').click()">选择JPG图片</button>
</div>

模块化绑定事件（更推荐） #

如果是组件化开发，避免内联事件，可在组件初始化时绑定：

// 组件初始化脚本中
const fileInput = document.getElementById('test-id');
const triggerBtn = document.getElementById('upload-trigger');

triggerBtn.addEventListener('click', () => {
  fileInput.click();
});

对应的HTML：

<div>
  <input 
    id="test-id" 
    type="file" 
    accept="jpg" 
    style="position: absolute; left: -9999px;"
    @change=${async (e: Event) => {
      await this.handleImages(e.target as HTMLInputElement, roles);
    }}
  />
  <button id="upload-trigger">选择JPG图片</button>
</div>

2. 将input包裹在label内部（无需id关联） #

把文件输入框放在label标签内，点击label的任意区域都会触发input的选择功能，这种方式不需要依赖id，避免了id冲突风险：

<label style="cursor: pointer;">
  <span>点击选择JPG图片</span>
  <input 
    type="file" 
    accept="jpg" 
    style="position: absolute; left: -9999px;"
    @change=${async (e: Event) => {
      await this.handleImages(e.target as HTMLInputElement, roles);
    }}
  />
</label>

3. 利用框架的指令/语法糖（适配你当前的类组件写法） #

如果你用的是支持@语法的框架（比如LitElement），可以直接在触发元素上绑定框架的点击事件，调用input的点击方法：

<div>
  <input 
    ref="fileInput" 
    type="file" 
    accept="jpg" 
    style="position: absolute; left: -9999px;"
    @change=${async (e: Event) => {
      await this.handleImages(e.target as HTMLInputElement, roles);
    }}
  />
  <button @click=${() => this.$refs.fileInput.click()}>选择图片</button>
</div>

注意：隐藏文件输入框时，尽量避免用display: none（部分旧浏览器存在兼容性问题），推荐用position: absolute; left: -9999px;的方式将其移出可视区域。

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