这种方法为您提供了完全的灵活性!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库开箱即用的解决方案，jquery-fileinput工作得很好。

本地拖放支持的工作示例:https://jsfiddle.net/j40xvkb3/

当样式化文件输入时，您不应该破坏任何本机交互 输入提供。

display: none方法破坏了本地拖放支持。

为了不破坏任何东西，你应该对输入使用不透明度:0的方法，并在包装器中使用相对/绝对模式来定位它。

使用这种技术，你可以很容易地为用户设置点击/拖放区域的样式，并在dragenter事件上添加javascript自定义类来更新样式，并给用户一个反馈，让他看到他可以拖放文件。

HTML:

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS:

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

下面是一个工作示例(带有额外的JS来处理拖拽事件和删除的文件)。

https://jsfiddle.net/j40xvkb3/

希望这对你有所帮助!

<input type="file" name="media" style="display-none" onchange="document.media.submit()">

我通常会使用简单的javascript来定制文件输入标记。一个隐藏的输入字段，点击按钮，javascript调用隐藏字段，简单的解决方案与任何css或一堆jquery。

<button id="file" onclick="$('#file').click()">Upload File</button>

 <label>
    <input type="file" />
 </label>

您可以将input type="file"包装在输入的标签中。样式标签，无论你喜欢和隐藏输入display: none;

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

你也可以看看这个记录