在Javascript中隐藏“无文件选择”工具提示

Question

我知道有很多问题，但他们没有正确回答。 在阅读并寻找之后，我尝试了这个：

<input id="ext-element-47" class="x-input-file x-input-el" type="file" accept="" style="display:none">

隐藏文件输入然后

this.element.down(".x-input-file").dom.click();

这适用于Chrome的控制台，但在我的JS代码中却没有。它没有点击。

任何人都知道为什么？以及如何点击？

  

注意：   我需要点击，因为文件元素不可见，因此当它点击它时它不显示，除非我做element.click（）。

以下是我正在做的一个例子：

document.getElementsByClassName('o-file-field-input')[0].click()

.o-file-field-input {
  display: none;
}

.o-big-btn {
  background-color: red;
  height: 3em;
  width: 3em;
}

<div class="x-container x-unsized o-cont-option" data-componentid="ext-container-5" id="ext-container-5">
  <div class="x-inner x-align-center x-pack-center x-horizontal x-layout-box" id="ext-element-50">
    <div class="x-button x-button-plain open-field-icon o-big-btn x-layout-box-item x-flexed x-stretched" id="ext-OUI_BaseButton-1" data-componentid="ext-OUI_BaseButton-1" tabindex="0" style="-webkit-box-flex: 1;">
      <span class="x-button-icon x-shown smf smf-upload-file" id="ext-element-45"></span>
      <div class="o-button-bg"></div>
      <div class="x-unsized x-field-input x-has-height" id="ext-fileinput-1" data-componentid="ext-fileinput-1" style="height: 38px;">
        <input id="ext-element-47" class="x-input-file x-input-el o-file-field-input" type="file" accept="">
        <div class="x-field-mask x-hidden-display" id="ext-element-48"></div>
        <div class="x-clear-icon" id="ext-element-49">
        </div>
      </div>
    </div>
  </div>
</div>

见啊！

Answer 1

这是我通常做的事情：将输入包裹在<label>元素中，然后将元素设置为按钮，例如：

.pretty-file {
  border: 1px solid #000;
  cursor: pointer;
  display: inline-block;
  padding: 5px 15px;
}

.pretty-file input[type="file"] {
  display: none;
}

<label class="pretty-file">
  Choose File
  <input type="file" />
</label>

Answer 2

这最终运作良好：

var obElement = document.getElementsByClassName('input-file')[0];
//the title property overrides tooltip's description
obElement.setAttribute('title', ' ');

.flex-style{
 display: flex;
}

.input-file{
 opacity: 0;
 margin-left: -40px;
 width: 40px;
 height: 45px;
}

.icon{
 width: 40px;
 height: 45px;
 background-color: blueviolet; 
}

<div class='flex-style'>
<div class='icon'></div>
<input class='input-file' type='file'>
</div>