javascript - 在 Javascript 中，如何通过 html 元素触发本地文件加载？

Question

我有一个应用程序，可以通过单击标签加载本地文件:

<div class="igv-drag-drop-surface">

    <div class="igv-drag-drop-file-icon-container" style="">
        <i id="igv-drag-drop-file-icon" class="fa fa-file fa-5x" aria-hidden="true"></i>
        <i id="igv-drag-drop-index-file-icon" class="fa fa-file-o fa-5x" aria-hidden="true"></i>
    </div>

    <div class="igv-track-file-input-container-css">

        <input id="igv-track-index-file-input" class="igv-track-file-input-css" type="file" name="files[]" data-multiple-caption="{count} files selected" multiple="" style="">

        <label for="igv-track-index-file-input" id="load-local-file-blurb" style="">
            <strong>Choose index file</strong>
            <span class="igv-drag-drop-surface-blurb"> or drop it here</span>
        </label>

    </div>

</div>

因此，单击带有 id 和 load-local-file-blurb 的 label 将显示文件选择器。效果很好。

我还希望能够单击带有 id 的图标 igv-drag-drop-index-file-icon 来显示文件选择器。

以下是小部件外观的视觉帮助:

我该怎么做？

Answer 1

只需触发标签上的点击即可。例如:

var icon = '#igv-drag-drop-index-file-icon';
var label = '#load-local-file-blurb';
document.querySelector(icon).addEventListener('click', function() {
  document.querySelector(label).click()
});

但更好的方法是单击文件输入字段。