Como ter um único botão para enviar o ficheiro

estou a tentar ter um único botão de envio do ficheiro sem os botões escolher o ficheiro ou enviar. Eu postei a imagem do meu botão de arquivo de upload e o HTML e estava pensando se alguém poderia me apontar na direção certa. Obrigado. 

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

enter image description here

Author: srsxyz, 2016-08-12
Source

3 answers

Porque não esconde o seu <input type="file" id="file"> e mostra apenas o seu botão de imagem, quando alguém carregar no seu botão use este código:

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>
 4
Author: Arpit Shrivastava, 2016-08-31 11:23:19

Podes usar assim 

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

Jquery para este 

$("#file").onchange(function () {
$("#form").submit();
});
 2
Author: Ranjan, 2016-08-12 14:37:33

Podes fazer isto: 

<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>
Este é o CSS. É basicamente posicionar o campo de entrada em cima do seu botão com opacidade: 0. Não consegues ver, mas funciona e parece que o teu botão está a fazer o trabalho quando não está. 
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;
}

Aqui está o JSFiddle {[[9] } para vê-lo em acção

 1
Author: Hadeel Alharthi, 2016-08-12 15:25:58