这是一个很好的方法来做材料/角文件上传。 你可以用bootstrap按钮做同样的事情。

注意，我使用了<a>而不是<button>，这允许点击事件冒泡。

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>

我能够做到这与纯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;"> < / >标签

这是简单的jquery。对Ryan的建议稍加修改后给出一个代码示例。

基本的html:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

当你准备好时，一定要在输入上设置样式:不透明度:0 你不能设置display: none，因为它需要是可点击的。但是你可以把它放在“new”按钮下面，或者如果你喜欢的话，把它塞进z-index的其他东西下面。

设置一些jquery，当你点击图像时，点击真正的输入。

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

现在你的按钮开始工作了。更改时只需剪切并粘贴值。

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

发长音!您可能需要将val()解析为更有意义的内容，但您应该已经全部设置好了。

用css隐藏它，并使用$(selector).click()自定义按钮来激活浏览按钮。然后设置检查文件输入类型值的时间间隔。interval可以显示用户的值，这样用户就可以看到上传了什么。当表单提交时，间隔将清除[编辑]对不起，我一直很忙，是想更新这篇文章，这里是一个例子

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

样式化文件输入是出了名的困难，因为大多数浏览器不会改变CSS或javascript的外观。

即使输入的大小也不会对以下内容做出反应:

<input type="file" style="width:200px">

相反，你需要使用size属性:

<input type="file" size="60" />

对于任何比这更复杂的样式(例如改变浏览按钮的外观)，你将需要考虑在本机文件输入上覆盖一个有样式的按钮和输入框的狡猾方法。rm在www.quirksmode.org/dom/inputfile.html上提到的那篇文章是我见过的最好的一篇。

更新

虽然直接对<input>标记设置样式很困难，但在<label>标记的帮助下，这很容易实现。请看下面来自@JoshCrozier的回答:https://stackoverflow.com/a/25825731/10128619

最好的方法是使用伪元素:after或:before作为显化de input的元素。然后按照您的意愿设置该伪元素的样式。我建议你为所有输入文件做一个通用的样式，如下所示:

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}