如何有一个上传文件的按钮

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的这个

$("#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的按钮上方。您看不到它，但它可以正常工作，而且看起来您的按钮在不按钮时正在执行作业。

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看到它在行动