你好:
我正在尝试自定义表单的输入文件,但是当我放置相应的样式时,它修改得很好,当我单击选择文件时,窗口打开,但是当我选择它时,文件的名称没有没有出现在按钮旁边,我不知道该怎么做。
HTML
<div style="margin-left: 225px; margin-top: -65px;" id="carta_nominador_div">
<label for="carta_nominador" style="color: #fff; background: #000; width: 142px; height: 52px; border-radius: 100px;cursor: pointer;">
<span class="iborrainputfile">ATTACH FILE</span>
</label>
<input type="file" name="carta_nominador" id="carta_nominador" class="inputfile inputfile-1" data-multiple-caption="{count} archivos seleccionados" multiple="">
</div>
CSS
.iborrainputfile { font-size: 14px; font-weight: normal; position: absolute; margin-top: 17px; margin-left: 25px; }
.inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.inputfile-1 + label { color: #fff; background-color: #000; }
.inputfile + label { max-width: 80%; cursor: pointer; padding: 0.625rem 1.25rem; width: 142px; border-radius: 25px; height: 52px; }
如何使所选文件的名称出现?
非常感谢,问候
通过隐藏浏览器控件,您还隐藏了显示所选文件名称的内部标记。该组件不能部分隐藏,因此您可以自己检索所选文件并将其显示在您自己的标签中。
我对样式进行了一些修改,以便正确显示。我添加了一个标签
span
来id='fichero_seleccionado'
显示所选文件的名称。我们在这里所做的是订阅
change
文件控件的事件并检索组件的值以显示它。