如何有一個上傳文件的按鈕

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