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>
1
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