Question

我正在尝试上传文档，只需点击icon.But我无法删除input type="file"的默认样式。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
  <label class="btn-btn-default">
    <i class="fa fa-upload fa-2x" aria-hidden="true"></i>Upload Document
    <input type="file" class="form-control col-lg-2 col-md-2 col-sm-2">
  </label>
</div>

Fiddle Link

请提出任何建议

Answer 1

更新2：
试试这个：）

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>

Answer 2

Add one class to the input field. Then in CSS hide it. Hope! this is what u want.


<input type="file" class="hideMe form-control col-lg-2 col-md-2 col-sm-2">


.hideMe{
display: none;
}

Answer 3

执行以下操作：

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

删除输入类型=“文件”的默认样式

3 个答案: