Twitter Bootstrap表单文件元素上载按钮

Question

为什么Twitter bootstrap没有花哨的文件元素上传按钮？如果为上传按钮实现了蓝色主按钮,那将是很好的.甚至可以使用CSS来精简上传按钮吗？(看起来像是无法操作的本机浏览器元素)

Answer 1

这是Bootstrap 3和4的解决方案.

要创建看起来像按钮的功能文件输入控件,您只需要HTML:

HTML

<label class="btn btn-default">
    Browse <input type="file" hidden>
</label>

这适用于所有现代浏览器,包括IE9 +.如果您还需要支持旧IE,请使用下面显示的旧方法.

此技术依赖于HTML5 hidden属性.Bootstrap 4使用以下CSS在不支持的浏览器中填充此功能.如果您使用的是Bootstrap 3,则可能需要添加.

[hidden] {
  display: none !important;
}

旧IE的遗留方法

如果您需要IE8及更低版本的支持,请使用以下HTML/CSS:

HTML

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

CSS

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

请注意,当您单击a时,旧IE不会触发文件输入<label>,因此CSS"膨胀"可以解决以下问题:

• 使文件输入跨越周围的整个宽度/高度 <span>
• 使文件输入不可见

反馈和补充阅读

我已经发布了有关此方法的更多详细信息,以及如何向用户显示选择了哪个/多少文件的示例:

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Answer 2

我很惊讶没有提到这个<label>元素.

解:

<label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file" class="d-none">
    Button Text Here
</label>

不需要任何JS或时髦的CSS ...

包含文件名的解决方案:

<label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file" style="display:none" 
    onchange="$('#upload-file-info').html(this.files[0].name)">
    Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span>

上面的解决方案需要jQuery.

Answer 3

由于不需要额外的插件,这个引导程序解决方案对我很有用:

<div style="position:relative;">
        <a class='btn btn-primary' href='javascript:;'>
            Choose File...
            <input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40"  onchange='$("#upload-file-info").html($(this).val());'>
        </a>
        &nbsp;
        <span class='label label-info' id="upload-file-info"></span>
</div>

演示:

http://jsfiddle.net/haisumbhatti/cAXFA/1/(bootstrap 2)

http://jsfiddle.net/haisumbhatti/y3xyU/(bootstrap 3)

Answer 4

它包含在Jasny的bootstrap中.

可以使用创建简单的上传按钮

<span class="btn btn-file">Upload<input type="file" /></span>

使用fileupload插件,您可以创建更高级的小部件.看看 http://jasny.github.io/bootstrap/javascript/#fileinput

Answer 5

上传按钮很难用于样式,因为它会对输入而不是按钮进行样式设置.

但你可以使用这个技巧:

http://www.quirksmode.org/dom/inputfile.html

摘要:

1. 取正常<input type="file">并将其放入元素中position: relative.

2. 对于同一个父元素,添加一个<input>具有正确样式的法线和图像.绝对定位这些元素,使它们占据与之相同的位置<input type="file">.

3. 将z-index设置<input type="file">为2,使其位于样式化输入/图像的顶部.

4. 最后,将不透明度设置<input type="file">为0. <input type="file">现在变得有效不可见,输入/图像样式闪耀,但您仍然可以单击"浏览"按钮.如果按钮位于图像顶部,则用户似乎单击图像并获得正常的文件选择窗口.(请注意,您不能使用visibility:hidden,因为真正不可见的元素也是不可忽略的,我们需要保持可点击状态)

Answer 6

适合我:

• Bootstrap中的漂亮文件输入字段

更新

jQuery插件样式:

// Based in: http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
// Version: 0.0.3
// Compatibility with: Bootstrap 3.2.0 and jQuery 2.1.1
// Use:
//     <input class="nice_file_field" type="file" data-label="Choose Document">
//     <script> $(".nice_file_field").niceFileField(); </script>
//
(function( $ ) {
  $.fn.niceFileField = function() {
    this.each(function(index, file_field) {
      file_field = $(file_field);
      var label = file_field.attr("data-label") || "Choose File";

      file_field.css({"display": "none"});

      nice_file_block_text  = '<div class="input-group nice_file_block">';
      nice_file_block_text += '  <input type="text" class="form-control">';
      nice_file_block_text += '  <span class="input-group-btn">';
      nice_file_block_text += '   <button class="btn btn-default nice_file_field_button" type="button">' + label + '</button>';
      nice_file_block_text += '  </span>';
      nice_file_block_text += '</div>';

      file_field.after(nice_file_block_text);

      var nice_file_field_button = file_field.parent().find(".nice_file_field_button");
      var nice_file_block_element = file_field.parent().find(".nice_file_block");

      nice_file_field_button.on("click", function(){ console.log("click"); file_field.click() } );
      file_field.change( function(){
        nice_file_block_element.find("input").val(file_field.val());
      });
    });
  };
})( jQuery );

Answer 7

使用其他答案中的部分简化回答,主要是user2309766和dotcomsuperstar.

特征:

• 使用按钮和字段的Bootstrap按钮插件.
• 只有一个输入; 多个输入将由表单拾取.
• 除了"display:none;"之外没有额外的CSS 隐藏文件输入.
• 可见按钮触发单击事件以隐藏文件输入.
• split 删除文件路径使用正则表达式和分隔符'\'和'/'.

码:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group">
  <span class="input-group-btn">
    <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').click();">Browse</span>
    <input name="uploaded_file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file">
  </span>
  <span class="form-control"></span>
</div>

Answer 8

从上面其他帖子的一些灵感来看,这里有一个完整的解决方案,它将看起来像表单控件字段和输入组插件的内容组合在一起,用于包含当前文件链接的干净文件输入窗口小部件.

.input-file { position: relative; margin: 60px 60px 0 } /* Remove margin, it is just for stackoverflow viewing */
.input-file .input-group-addon { border: 0px; padding: 0px; }
.input-file .input-group-addon .btn { border-radius: 0 4px 4px 0 }
.input-file .input-group-addon input { cursor: pointer; position:absolute; width: 72px; z-index:2;top:0;right:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0; background-color:transparent; color:transparent; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="input-group input-file">
  <div class="form-control">
    <a href="/path/to/your/current_file_name.pdf" target="_blank">current_file_name.pdf</a>
  </div>
  <span class="input-group-addon">
    <a class='btn btn-primary' href='javascript:;'>
      Browse
      <input type="file" name="field_name" onchange="$(this).parent().parent().parent().find('.form-control').html($(this).val());">
    </a>
  </span>
</div>

Answer 9

这对我来说非常适合

<span>
    <input  type="file" 
            style="visibility:hidden; width: 1px;" 
            id='${multipartFilePath}' name='${multipartFilePath}'  
            onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))"  /> <!-- Chrome security returns 'C:\fakepath\'  -->
    <input class="btn btn-primary" type="button" value="Upload File.." onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
    &nbsp;
    <span  class="badge badge-important" ></span>
</span>

Answer 10

请查看Twitter Bootstrap文件输入.它使用非常简单的解决方案,只需添加一个javascript文件,然后粘贴以下代码:

$('input[type=file]').bootstrapFileInput();

Answer 11

具有可接受结果的简单解决方案：

<input type="file" class="form-control">

和样式：

input[type=file].form-control {
    height: auto;
}

Answer 12

多次上传的解决方案

我调整了之前的两个答案，以包含多个上传文件。这样，如果只选择了一个，则标签显示文件名，或者x files相反。

<label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file" multiple="multiple" style="display:none"
        onchange="$('#upload-file-info').html(
            (this.files.length > 1) ? this.files.length + ' files' : this.files[0].name)">                     
    Files&hellip;
</label>
<span class='label label-info' id="upload-file-info"></span>

它也可能适用于更改按钮的文本和类。

<label class="btn btn-primary" for="multfile">
    <input id="multfile" type="file" multiple="multiple" style="display:none"
        onchange="$('#multfile-label').html(
            (this.files.length == 1) ? this.files[0].name : this.files.length + ' files');
            $(this).parent().addClass('btn-success')">
    <span id="multfile-label">Files&hellip;</span>
</label>