我发现这种方法最简单、最轻便。

下面是工作示例:http://codepen.io/c3zar22/pen/QNoYXN

以下是解释:

this would be the markup: <label for="attach-project-file"> <span id="remove-project-file" class="close">x</span> <div class="filename" id="attached-project-file">Click to select a file</div> </label> <input id="attach-project-file" type="file"> hide the input in a hacky way like this: #attach-project-file { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } style the corresponding label instead [for="attach-project-file"] { /* your styles here */ } style "remove file" button .close { font-size: 16px; padding: 10px; position: absolute; top: 0; right: 0; cursor: pointer; font-style: normal; } .filename element will be used to display the selected file below is the commented JS code needed (using jQuery) to make it work: var $attach = $('#attach-project-file'), $remove = $('#remove-project-file'), $name = $('#attached-project-file'); // initially hide the remove button $remove.hide(); // do this when file input has changed // i.e.: a file has been selected $attach.on('change', function() { var val = $(this).val(); if (val !== '') { // if value different than empty // show the file name as text // hide/text/fadeIn creates a nice effect when changing the text $name .hide() .text(val) .fadeIn(); // show the remove button $remove.fadeIn(); } else { // if value empty, means the file has been removed // show the default text $name .hide() .text('Click to select a file') .fadeIn(); // hide remove button $remove.fadeOut(); } }); // remove selected file when clicking the remove button // prevent click bubbling to the parent label and triggering file selection $remove.on('click', function(e) { e.preventDefault(); e.stopPropagation(); $attach .val('') .change(); // trigger change event });

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

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>

我发现插件解决方案太笨重了，所以我制作了自己的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。

这种方法为您提供了完全的灵活性!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网站的某个地方得到这个想法的。)

如果有人仍然关心如何在没有JavaScript的情况下做到这一点，让我完成Josh的回答:

如何显示文件名的文本:

最简单的方法是将这两个元素设置到一个位置:相对，给标签一个更高的z-index，并给输入文件负边距，直到标签文本在你想要的位置。不要在输入时使用display:none !

例子:

input[type="file"] {
  position:relative;
  z-index:1;
  margin-left:-90px;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  position:relative;
  z-index:2;
  background:white;

}

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

自举例子

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