更新二：

试试这个：）

function readURL(input) {
        if (input.files && input.files[0]) {
            $(".fa-upload").css("color", "green");
        }else{
          $(".fa-upload").css("color", "black");
        }
    }
 
 
 $("#inputFile").change(function () {
        readURL(this);
    });

.file-upload {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
  <label class="btn-btn-default">
    <div class="fa fa-upload fa-2x ">Upload Image</div>
    <input id="inputFile" class="file-upload" type="file" accept="image/*" />
  </label>
</div>

执行以下操作：

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <label class="btn-btn-default">
                            <i id="1" onclick="do2()" class="fa fa-upload fa-2x" aria-hidden="true"></i>Upload Document
                            <input id="2" style="display:none;"type="file" class="form-control col-lg-2 col-md-2 col-sm-2 ">
                        </label>
                    </div>

并将其添加到您的javascript中，以模拟图标上的输入行为：

Function do2(){
 document.getElementById("2").click;
}

在输入域中添加一个类。然后在CSS中隐藏它。

<input type="file" class="hideMe form-control col-lg-2 col-md-2 col-sm-2">
                        
<style>
.hideMe{
    display: none;
}
</style>

input[type=file]::file-selector-button{
  visibility: hidden;
  color: transparent;
}

input[type=file]::-webkit-file-upload-button{
  visibility: hidden;
  color: transparent;
}