Bootstrap 表单上传文件布局

Posted 2023-03-05

【中文标题】Bootstrap 表单上传文件布局

【英文标题】：Bootstrap form upload file layout

【发布时间】：2015-11-13 17:16:51

【问题描述】：

我正在使用 Bootstrap 3 为我的 MVC Web 应用程序创建一个表单。我在正确对齐文件输入字段时遇到了一些问题。我使用this 资源来创建它们。

我的表单目前看起来像this。

我想将显示文件名的文本字段与我的其他字段对齐。代码是这样的：

<form>
<fieldset>
...

        <div class="form-group">
            <label for="inputDeliveryDate" class="col-lg-2 control-label">Delivery date</label>
            <div class="col-lg-10">
                <input type="date" class="form-control" id="inputDeliveryDate">
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-2 control-label">Attachment</label>
                <div class="col-lg-10">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <span class=" btn btn-info btn-file">
                                Browse<input type="file" name="data" id="data">
                            </span>
                        </span>
                        <input type="text" id="uploadFile" class="form-control small" readonly />
                    </div>
                </div>
            </div>

        <div class="form-group">
            <label for="inputComment" class="col-lg-2 control-label">Comment</label>
            <div class="col-lg-10">
                <textarea class="form-control" rows="5" id="inputComment"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-lg-10 col-lg-offset-2">
                <button type="submit" class="btn btn-success">Submit</button>
            </div>
        </div>
</fieldset>
</form>

我尝试将输入字段包装在 col-xs-4 div 中，但这似乎不起作用。

【问题讨论】：

您需要发布所有代码 (html/CSS/JS)。

【参考方案1】：

FileUpload 是很难更改的 HTML 元素，特别是如果您使用 CSS 框架。有一些解决方案可以更改此元素的样式，例如您在问题或http://www.quirksmode.org/dom/inputfile.html 中提到的主要基于 CSS 的解决方案。

我的解决方案涉及一些 javascript / jquery 编程；它以前对我有用，我希望它对你有用。

在这个解决方案中，我们制作了一个由按钮和输入文本框组成的假 FileUpload 元素。它还有一个未在表单中显示的真实 FileUpload 元素。然后在 javascript 代码中我们处理假元素的点击事件并将其发送给真实的 FileUpload 元素。

在解决方案中，我们可以随意设计假元素；例如，将浏览按钮放在右侧。

    $('#exampleFakeBrowseFile1, #exampleFakeFile1').on('click', function() 
      $('#exampleFile1').trigger("click");
    );
    $('#exampleFile1').change(function() 
      var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
      $('#exampleFakeFile1').val(file_name);
    );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form>
    <div class="form-group">
      <label for="exampleFakeFile1">File</label>

      <div class="input-group">
        <input type="file" id="exampleFile1" name="exampleFile1" style="display: none">
        <input type="text" class="form-control" id="exampleFakeFile1" readonly>
        <span class="input-group-btn">
                    <button class="btn btn-default" type="button" id="exampleFakeBrowseFile1">Browse...</button>
                </span>
      </div>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>