我在这里找到了一个使用jQuery的非常聪明的解决方案，它可以在所有旧浏览器和新浏览器中工作。 它使用实际的文件浏览按钮来处理所有样式和click()问题。 我做了一个简单的javascript版本:小提琴 解决方案非常简单，就像天才一样:让文件输入不可见，然后用一段代码把它放在mousecursor下面。

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
    <input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>
<script>
    function file_ho(e, o, a) {
        e = window.event || e;
        var x = 0,
        y = 0;
        if (o.offsetParent) {
            do {
            x += o.offsetLeft;
            y += o.offsetTop;
            } while (o = o.offsetParent);
        }
    var x1 = e.clientX || window.event.clientX;
    var y1 = e.clientY || window.event.clientY;
    var le = 100 - (x1 - x);
    var to = 10 - (y1 - y);
    document.getElementById('file_' + a).style.marginRight = le + 'px';
    document.getElementById('file_' + a).style.marginTop = -to + 'px';
    }
</script>
<style>
    .inp_field_12 {
        position:relative;
        overflow:hidden;
        float: left;
        width: 130px;
        height: 30px;
        background: orange;
    }
    .inp_field_12 span {
        position: absolute;
        width: 130px;
        font-family:'Calibri', 'Trebuchet MS', sans-serif;
        font-size:17px;
        line-height:27px;
        text-align:center;
        color:#555;
    }
    .inp_field_12 input[type='file'] {
        cursor:pointer;
        cursor:hand;
        position: absolute;
        top: 0px;
        right: 0px;
        -moz-opacity:0;
        filter:alpha(opacity=0);
        opacity: 0;
        outline: none;
        outline-style:none;
        outline-width:0;
        ie-dummy: expression(this.hideFocus=true);
    }
    .inp_field_12:hover {
        background-position:-140px -35px;
    }
    .inp_field_12:hover span {
        color:#fff;
    }
</style>

按照以下步骤，你就可以为你的文件上传表单创建自定义样式了:

this is the simple HTML form(please read the HTML comments I have written here below) <form action="#type your action here" method="POST" enctype="multipart/form-data"> <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div> <!-- this is your file input tag, so i hide it!--> <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div> <!-- here you can have file submit button or you can write a simple script to upload the file automatically--> <input type="submit" value='submit' > </form> then use this simple script to pass the click event to file input tag. function getFile(){ document.getElementById("upfile").click(); } Now you can use any type of styling without worrying about how to change default styles.

我非常清楚这一点，因为我已经尝试更改默认样式一个半月了。相信我，这是非常困难的，因为不同的浏览器有不同的上传输入标签。所以使用这个来构建您的自定义文件上传表单。这里是完整的自动上传代码。

function getFile() { document.getElementById("upfile").click(); } function sub(obj) { var file = obj.value; var fileName = file.split("\\"); document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1]; document.myForm.submit(); event.preventDefault(); } #yourBtn { position: relative; top: 150px; font-family: calibri; width: 150px; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px dashed #BBB; text-align: center; background-color: #DDD; cursor: pointer; } <form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm"> <div id="yourBtn" onclick="getFile()">click to upload a file</div> <!-- this is your file input tag, so i hide it!--> <!-- i used the onchange event to fire the form submission--> <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div> <!-- here you can have file submit button or you can write a simple script to upload the file automatically--> <!-- <input type="submit" value='submit' > --> </form>

CSS在这里可以做很多事情…耍点小花招……

<div id='wrapper'>
    <input type='file' id='browse'>
</div>
<style>
    #wrapper {
            width: 93px; /*play with this value */
            height: 28px; /*play with this value */
            background: url('browseBtn.png') 0 0 no-repeat;
            border:none;
            overflow:hidden;
    }

    #browse{
            margin-left:-145px; /*play with this value */
            opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
</style>

::参考::http://site-o-matic.net/?viewpost=19

修道院

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

自举例子

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;
  });
});

我能够做到这与纯CSS使用下面的代码。我已经使用了bootstrap和font-awesome。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <label class="btn btn-default btn-sm center-block btn-file"> <i class="fa fa-upload fa-2x" aria-hidden="true"></i> . <input type="file" style="display: none;"> < / >标签

这里有一个简单的css解决方案，它创建了一个一致的目标区域，并让你的伪造元素的风格，无论你喜欢。

基本思想是这样的:

有两个“假”元素(一个文本输入/链接)作为你的真实文件输入的兄弟。绝对放置它们，让它们完全在你的目标区域上方。 用div包装你的文件输入。将overflow设置为hidden(这样文件输入就不会溢出来)，并使它恰好是你想要的目标区域的大小。 在文件输入上设置不透明度为0，这样它就被隐藏了，但仍然可以点击。给它一个大的字体大小，这样你就可以点击目标区域的所有部分。

下面是jsfiddle: http://jsfiddle.net/gwwar/nFLKU/

<form>
    <input id="faux" type="text" placeholder="Upload a file from your computer" />
    <a href="#" id="browse">Browse </a>
    <div id="wrapper">
        <input id="input" size="100" type="file" />
    </div>
</form>