$ (' .new_Btn ') .click(函数(){ $ (' # html_btn ') .click (); })； .new_Btn { // CSS属性 ｝ # html_btn { 显示:没有; ｝ < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < div class = " new_Btn”> SelectPicture < / div > < br > <input id="html_btn" type='file' /><br> .

你也可以在没有jQuery的情况下使用正常的JavaScript实现你的目标。

现在newBtn与html_btn链接，你可以像你想要的那样样式你的新btn:D

这周我还需要自定义按钮，并在旁边显示所选的文件名，所以在阅读了上面的一些答案后(谢谢BTW)，我想出了以下实现:

HTML:

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

Javascript(角)

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

基本上我正在使用ng-file-upload lib, angular方面，我将文件名绑定到我的$作用域，并给它的初始值为'No file selected '，我还将onFileSelect()函数绑定到我的作用域，因此当一个文件被选中时，我使用ng-upload API获取文件名并将其分配给$scope.filename。

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

如果你正在使用Bootstrap 3，这对我来说是有效的:

参见https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

.btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <span class="btn btn-primary btn-file"> Browse...<input type="file"> </span>

它会产生以下文件输入按钮:

认真的，去https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/看看吧

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

更新没关系，这不能工作在IE或它的新兄弟，FF。可以正常工作在其他类型的元素上，但不能工作在文件输入上。更好的方法是创建一个文件输入和一个链接到它的标签。使文件输入显示无和boom，它在IE9+无缝工作。

警告:以下所有内容都是垃圾!

通过使用根据容器定位/调整大小的伪元素，我们可以只使用一个输入文件(不需要额外的标记)，并按通常的方式设置样式。

Demo

<input type="file" class="foo">
<style>
    .foo {
        display: block;
        position: relative;
        width: 300px;
        margin: auto;
        cursor: pointer;
        border: 0;
        height: 60px;
        border-radius: 5px;
        outline: 0;
    }
    .foo:hover:after {
        background: #5978f8;
    }
    .foo:after {
        transition: 200ms all ease;
        border-bottom: 3px solid rgba(0,0,0,.2);
        background: #3c5ff4;
        text-shadow: 0 2px 0 rgba(0,0,0,.2);
        color: #fff;
        font-size: 20px;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        content: 'Upload Something';
        line-height: 60px;
        border-radius: 5px;
    }
</style>

享受的家伙!

旧的更新

把这个变成了Stylus mixin。应该很容易让你们中的一个酷SCSS猫转换它。

    file-button(button_width = 150px)
      display block
      position relative
      margin auto
      cursor pointer
      border 0
      height 0
      width 0
      outline none
      &:after
        position absolute
        top 0
        text-align center
        display block
        width button_width
        left -(button_width / 2)

用法:

<input type="file">

input[type="file"]
    file-button(200px)