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

自举例子

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解决方案，它创建了一个一致的目标区域，并让你的伪造元素的风格，无论你喜欢。

基本思想是这样的:

有两个“假”元素(一个文本输入/链接)作为你的真实文件输入的兄弟。绝对放置它们，让它们完全在你的目标区域上方。 用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>

这种方法为您提供了完全的灵活性!ES6 / VanillaJS!

html:

<input type="file" style="display:none;"></input>
<button>Upload file</button>

javascript:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

这隐藏了输入文件按钮，但实际上是从另一个普通按钮点击它，显然您可以像设置其他按钮一样设置它的样式。这是除了无用的dom节点之外没有任何缺点的唯一解决方案。多亏了display:none;，输入按钮在DOM中不保留任何可见空间。

(我已经不知道该支持谁了。但我是从Stackoverflow网站的某个地方得到这个想法的。)

我发现插件解决方案太笨重了，所以我制作了自己的jQuery插件Drolex FileStyle。

This plug-in allows you to style file input fields however you want. Actually, you style div elements to look like a tricked out file input, and the actual file input is automatically overlaid with 0% opacity. No additional HTML is required. Just include the css and js files in the page you want Drolex FileStyle and that's it! Edit the css file to your liking. Don't forget the jQuery library if your page doesn't already have it. If the client does not run JavaScript, then the file input will not be modified by js or css.

测试工作在Chrome 24, Firefox 18, Internet Explorer 9。 预计可以在之前的版本中使用。

下载:http://web.drolex.net/Drolex-FileStyle.zip。

我在这里找到了一个使用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>

这里有一个解决方案，它没有真正对<input type="file" />元素进行样式化，而是在其他元素之上使用<input type="file" />元素(可以进行样式化)。<input type="file" />元素实际上是不可见的，因此，整体的错觉是一个漂亮的样式文件上传控件。

我最近遇到了这个问题，尽管Stack Overflow上有太多的答案，但似乎没有一个真正符合要求。最后，我对它进行了定制，以获得一个简单而优雅的解决方案。

我还在Firefox、IE(11、10和9)、Chrome和Opera、iPad和一些android设备上进行了测试。

这里是JSFiddle链接-> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) { $in = $(this); $in.next().html($in.val()); }); $('.uploadButton').click(function() { var fileName = $("#fileUpload").val(); if (fileName) { alert(fileName + " can be uploaded."); } else { alert("Please select a file to upload"); } }); body { background-color:Black; } div.upload { background-color:#fff; border: 1px solid #ddd; border-radius:5px; display:inline-block; height: 30px; padding:3px 40px 3px 3px; position:relative; width: auto; } div.upload:hover { opacity:0.95; } div.upload input[type="file"] { display: input-block; width: 100%; height: 30px; opacity: 0; cursor:pointer; position:absolute; left:0; } .uploadButton { background-color: #425F9C; border: none; border-radius: 3px; color: #FFF; cursor:pointer; display: inline-block; height: 30px; margin-right:15px; width: auto; padding:0 20px; box-sizing: content-box; } .fileName { font-family: Arial; font-size:14px; } .upload + .uploadButton { height:38px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form action="" method="post" enctype="multipart/form-data"> <div class="upload"> <input type="button" class="uploadButton" value="Browse" /> <input type="file" name="upload" accept="image/*" id="fileUpload" /> <span class="fileName">Select file..</span> </div> <input type="button" class="uploadButton" value="Upload File" /> </form>

希望这能有所帮助!!