如何为上传文件设置一个按钮

Question

我试图拥有一个没有选择文件或提交按钮的上传文件按钮。我发布了上传文件按钮和HTML的图像，并想知道是否有人能指出我正确的方向。感谢

<a href="#" class="btn btn-info btn-sm remove">
  <span class="glyphicon glyphicon-upload"></span> Upload File
</a>

Answer 1

为什么不隐藏您的<input type="file" id="file">并仅显示您的图片按钮，当有人点击您的按钮时使用此代码：

HTML：

<input type="file" id="file" style="display:none;" />
<button id="button" name="button" value="Upload" onclick="thisFileUpload();">Upload</button>

SCRIPT：

<script>
        function thisFileUpload() {
            document.getElementById("file").click();
        };
</script>

Answer 2

你可以这样使用

<form id="form">
<input type="file" id=file"/> 
</form>

Jquery for this

$("#file").onchange(function () {
$("#form").submit();
});

Answer 3

你可以这样做：

<form enctype="multipart/form-data">
  <div>
    <input type="file" />
    <a href="#0" class="btn btn-info btn-sm remove">
      <span class="glyphicon glyphicon-upload"></span> Upload File
    </a>
  </div>
</form>

这是CSS。它基本上将输入字段定位在按钮顶部，不透明度为0.您无法看到它但是它可以工作，看起来您的按钮正在完成工作，而不是。< / p>

form div {
  position: relative;
  width: 102px;
  height: 38px;
  overflow: hidden;
  cursor: pointer;
}

input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

.btn {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 8px;
  background-color: lightblue;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

这里有JSFiddle可以看到它的实际效果