Question

以下用于设置/隐藏输入类型文件的代码适用于除Chrome之外的所有浏览器。

<h5>Artikelliste hochladen:</h5>
<label for="uploadSkus">
    <button class="btn" id="add-article-list">
        <i class="icon icon-folder-open"></i> Liste auswählen
    </button>
</label>
<input type="file"
       name="uploadSkus" id="uploadSkus"
       class="articles-upload" style="display: none;">

在这里演示JSFiddle。

我被困在哪个小细节阻止了Chrome让它工作。

尝试与display: none;一起玩，但没有成功。控制台中没有错误或警告。有什么想法吗？

Answer 1

使用hidden attr

    <h5>Artikelliste hochladen:</h5>
    <label for="uploadSkus">
        <button class="btn" id="add-article-list"><i class="icon icon-folder-open"></i> Liste auswählen</button>
    </label>
    <input type="file" name="uploadSkus" id="uploadSkus" class="articles-upload" hidden>

Answer 2

看一下这篇文章：How can I remove the "No file chosen" tooltip from a file input in Chrome?

<h5>Artikelliste hochladen:</h5>
<label for="uploadSkus">
   <button class="btn" id="add-article-list"><i class="icon icon-folder-open"></i> Liste auswählen</button>
</label>
<input type="file" name="uploadSkus" id="uploadSkus" class="articles-upload" style="display: none;">

$('#add-article-list').click(function(){
   $("#uploadSkus").trigger('click');
})

Answer 3

对我来说问题是输入上的display:none样式，标签在firefox中运行正常但在chrome中不起作用。

为了保持隐藏效果，我删除了display:none样式并在输入中添加了height: 0px; overflow: hidden;。

隐藏/样式文件输入在Firefox中工作但在Chrome中不起作用

3 个答案: