如何删除上传按钮但保留标签？

Question

我正在尝试做到这一点，当您单击页面的特定部分时，用户可以上传文件。现在，我已经做到了按钮的不透明度为 0，但标签也消失了。我只希望标签在那里，但按钮不见了。

基本代码：http://pastebin.com/gWYVNPxK

Answer 1

而不是 <button onclick=".."/> 您可以使用 <div onclick=".."> 或 <span onclick="..">，其中 span/div 代表页面的可点击部分

Answer 2

您可以使用 display 而不是 opacity 和一点点 jQuery 来使文本触发 now-hidden 按钮：

JSFiddle: https://jsfiddle.net/Hybridx24/qou099nj/

Answer 3

$('#_uploadText').on('click', function() {
  $('#_inputFile').click();
})

$('#_inputFile').on('change', function() {
 var value = $("#_inputFile").val();
 $("#_fileName").html(value);
})

input {
 display: none
}

<div class="col-md-2">
 <input id="_inputFile" type="file" class="form-control">
 <small id="_uploadText"> Click or Drag an Attachment </small>
  <br>
  <span id="_fileName"></span>

在更改输入文件的显示值时使用额外的 jquery

如何删除上传按钮但保留标签？

How do I remove the upload button but keep the label?

html

upload

label

file

button