样式化input type="file"按钮

你如何风格输入类型=“文件”按钮?

<输入类型=“文件” />

当前回答

转换文件名的多个文件解决方案

自举例子

HTML:

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. jQuery JS:

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. JS没有jQuery

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});

2020-01-07 14:47:39

其他回答

一个快速粗暴的方法是将标签设置为按钮，并将位置设置为绝对，这样它就会浮动在原始按钮上，你仍然可以看到文件名。不过，我正在考虑移动解决方案。

2017-05-29 18:13:34

如果你正在寻找一个javascript库开箱即用的解决方案，jquery-fileinput工作得很好。

2013-11-25 21:15:41

不要被“伟大的”css解决方案所欺骗，这些解决方案实际上非常特定于浏览器，或者将样式化按钮覆盖在真正的按钮之上，或者强迫您使用<label>而不是<button>，或任何其他类似的hack。JavaScript是必要的，以使其工作为一般用途。如果你不相信我，请学习gmail和DropZone是怎么做的。

只要按你想要的样式设计一个普通的按钮，然后调用一个简单的JS函数来创建并链接一个隐藏的输入元素到你的样式按钮。

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

注意上面的代码是如何在用户每次选择一个文件后重新链接它的。这很重要，因为只有当用户更改文件名时才会调用"onchange"。但您可能希望在用户每次提供该文件时获取该文件。

2017-09-09 06:34:38

这里我们使用span来触发类型文件的输入，并且我们简单地定制了span，所以我们可以使用这种方式添加任何样式。

注意，我们使用带有可见性:hidden选项的input标记，并在span中触发它。

.attachFileSpan { 颜色:# 2 b6dad; 光标:指针; ｝ .attachFileSpan:{徘徊文字修饰:下划线; ｝ <h3>自定义输入文件类型</h3> <input id="myInput" type="file" style="visibility:hidden"/> <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()" > 附加文件 < / span >

参考

2017-12-05 08:42:38

当<input type="file">被创建时，所有渲染引擎都会自动生成一个按钮。从历史上看，这个按钮是完全不可样式的。然而，Trident和WebKit通过伪元素添加了钩子。

三叉戟

从IE10开始，文件输入按钮可以使用::-ms-browse伪元素来设置样式。基本上，应用于普通按钮的任何CSS规则都可以应用于伪元素。例如:

:: -ms-browse { 背景:黑色; 颜色:红色; 填充:1 em; ｝ < input type = " file " >

Windows 8操作系统的IE10界面显示如下:

WebKit

WebKit为其文件输入按钮提供了一个带有::-webkit-file-upload-button伪元素的钩子。同样，几乎任何CSS规则都可以应用，因此Trident的例子也可以在这里工作:

:: -webkit-file-upload-button { 背景:黑色; 颜色:红色; 填充:1 em; ｝ < input type = " file " >

在OS X操作系统下，Chrome 26界面显示如下:

2013-05-01 07:37:26