Как создать ссылку на якорь для загрузки файлов?

Question

Ниже код работает почти правильно, но он всегда отображает кнопку «выбрать файл». Мне нужно, чтобы кнопка выбора файла не отображалась, и все, что осталось - это ссылка, которая является файловым загрузчиком.

Как создать ссылку на якорь для загрузки файлов правильно?

Это использование bootstrap-filestyle.

$(function(){ 
    $("#upload_link").on('click', function(e){ 
    e.preventDefault(); 
    $("#upload:hidden").trigger('click'); 
    }); 
}); 

#upload_link{text-decoration:none;} 
#upload{display:none} 

<input id="upload" type="file"/> 
<a href="" id="upload_link">Upload your photo</a> 

Answer 1

Использовать этот CSS

.btn-file { 
    display: block; 
    height: 20px; 
    overflow: hidden; 
    position: relative; 
    vertical-align: middle; 
    width: 120px; 
} 


.btn-file > input { 
    cursor: pointer; 
    direction: ltr; 
    font-size: 23px; 
    margin: 0; 
    opacity: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    transform: translate(-300px, 0px) scale(4); 
} 

input[type="file"] { 
    display: block; 
} 

Использовать этот HTML

<span class="btn default btn-file"> 
           <span class="fileinput-new"> 
            Select Document 
           </span> 
           <input type="file" class="textbox wp95 fl fileupload fileInput" name="files" id="fileupload"> 
          </span>