把上传文件按钮放在你漂亮的按钮或元素上并隐藏它。

非常简单，可以在任何浏览器上工作

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

风格

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}

我能想到的唯一方法是在它被渲染后用javascript找到按钮，并分配一个样式给它

你也可以看看这个记录

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

自举例子

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

使用这个非常简单和容易

.choose: -webkit-file-upload-button { 颜色:白色; 显示:inline-block; 背景:# 1 cb6e0; 边界:没有; 填充:7px 15px; 粗细:700; border - radius: 3 px; 空白:nowrap;} 光标:指针; 字体大小:10 pt; ｝ <label>附加你的屏幕短片</label> <input type="file" multiple class=" select ">

你可以创建一个很棒的(未完成的)文件上传器到<button>元素或任何其他元素:

函数selectFile() { . getelementbyid (fileSelector) .click (); ｝ 输入# fileSelector (type = "文件"){ 显示:没有; ｝ 按钮onclick * =”()”){ 光标:指针; ｝ <input type="file" id="fileSelector"> <按钮onclick = " selectFile ()>选择文件从计算机

如果有人仍然关心如何在没有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;

}