javascript - 水平居中对齐 File Upload 控件的 'No file chosen' 消息

Question

我有一个文件上传控件，如下所示，

代码:

<div class="row">
        <div class="col-md-12">
            <div class="alert alert-warning normal-text hide" role="alert" id="ImportErrorMessage"></div>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form id="FileImportForm" method="POST" action="api/FileUpload/Upload" enctype="multipart/form-data">
                        <div class="col-md-1">
                            <a href="#" class="btn btn-danger btn-xs download-template" title="Get Template"><span class="glyphicon glyphicon-download-alt"></span>&nbspGet Template</a>
                        </div>
                        <div class="col-md-3">
                            <select id="ItemDdl" class="col-md-12 item-list" title="Items"></select>
                        </div>
                        <div class="col-md-3">
                            <input type="file" id="ImportFile" name="ImportFile" accept="*.xlsx" class="col-md-12" />
                        </div>
                        <div class="col-md-1">
                            <button class="btn btn-danger btn-xs" id="ImportFileBtn" type="Submit" title="Import and Validate"><span class="glyphicon glyphicon-import"></span>Validate</button>
                        </div>                        
                    </form>
                </div>
            </div>
        </div>
    </div>

期望:

我想在中心显示“未选择文件”消息，如图所示。原因是为了减少“验证”按钮和“选择文件”按钮之间的空白区域。

尝试过的选项:

我试图通过 css 属性和 jquery 修改它，但无法在 UI 中找到文本。

感谢任何帮助。

Answer 1

抱歉，没有简单的方法可以做到这一点。唯一的方法是隐藏该输入，将图像放在该输入所在的位置以及一些带有边距的文本。使用 javascript，您可以轻松定位它并确保点击跨浏览器有效。