具有文件类型的输入元素在chrome中不起作用 - Angular 2

Question

我正在开发一个Angular 2应用程序。请参阅下面的模板的一部分 -

     <label class="import-label" title="Select file">
          <span class="grid-btn fa fa-folder">
             <input type="file" class="form-control import-input-file" id="contactname" aria-describedby="contactname" 
              placeholder="File Name" name="filename" style="display:none;"
             (change)="onChange($event)">
           </span>
    </label>

屏幕截图 -

当我点击文件夹图标按钮时，选择文件的对话框无法在Chrome中打开（它可以按预期用于IE）。但是，它可以在Chrome中双击。

注意：

input tag有display:none。

Answer 1

将 for =“contactname”添加到标签

<label class="import-label" title="Select file" for="contactname">