É possível fazer um botão como botão de envio de arquivo?
sou novo em php. Eu tenho um formulário no qual eu coloco um valor de botão como {[[0]} quando o usuário clicar neste botão, ele redireciona em um formulário web onde eu coloco um controle de envio de arquivos e arquivo de upload do Usuário aqui. Aqui está a imagem
Depois de carregar neste botão, o utilizador redirecciona para este formulário
Aqui o ficheiro de envio do utilizador.A MINHA PERGUNTA
É possível que eu possa fazer o meu botão como botão de envio de ficheiros? Pode funcionar como o botão de controlo de envio de ficheiros? Na verdade, quero poupar tempo ao utilizador. Eu quero que quando o usuário clicar em {[[0]} botão que não redireciona no formulário. Mas quando o utilizador carrega no botãoUpload MB
, permite ao utilizador enviar o ficheiro e abrir a janela de navegação. Depois disso, quando o usuário enviar o arquivo ele redireciona no formulário.
Podem dizer-me que é possível ou não?
5
4 answers
Você pode manter um <input type='file' hidden/>
no seu código e clicar nele usando javascript quando o usuário clica no "Upload MB"
botão.
Olha para istoviolino .
Aqui está o excerto.document.getElementById('buttonid').addEventListener('click', openDialog);
function openDialog() {
document.getElementById('fileid').click();
}
<input id='fileid' type='file' hidden/>
<input id='buttonid' type='button' value='Upload MB' />
<html>
<head>
<script>
function setup() {
document.getElementById('buttonid').addEventListener('click', openDialog);
function openDialog() {
document.getElementById('fileid').click();
}
document.getElementById('fileid').addEventListener('change', submitForm);
function submitForm() {
document.getElementById('formid').submit();
}
}
</script>
</head>
<body onload="setup()">
<form id='formid' action="form.php" method="POST" enctype="multipart/form-data">
<input id='fileid' type='file' name='filename' hidden/>
<input id='buttonid' type='button' value='Upload MB' />
<input type='submit' value='Submit' />
</form>
</body>
</html>
11
Author: Shrinivas Shukla, 2015-07-29 08:17:53
Bootstrap Way
.choose_file {
position: relative;
display: inline-block;
font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
color: #7f7f7f;
margin-top: 2px;
background: white
}
.choose_file input[type="file"]{
-webkit-appearance:none;
position:absolute;
top:0;
left:0;
opacity:0;
width: 100%;
height: 100%;
}
<div class="choose_file">
<button type="button" class="btn btn-default" style="width: 125px;">Choose Image</button>
<input name="img" type="file" accept="image/*" />
</div>
2
Author: Anas Al Hamdan, 2017-12-04 12:32:42
<html>
<body>
<input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/>
<input type="hidden" id="filename" readonly="true"/>
<input type="button" value="Upload MB" id="fakeBrowse" onclick="HandleBrowseClick();"/>
</body>
<script>
function HandleBrowseClick()
{
var fileinput = document.getElementById("browse");
fileinput.click();
}
function Handlechange()
{
var fileinput = document.getElementById("browse");
var textinput = document.getElementById("filename");
textinput.value = fileinput.value;
}
</script>
</html>
1
Author: Salim Malik, 2015-07-29 07:20:34
Eu sugiro converter o botão para o rótulo. aplique o css na etiqueta para que se pareça com o botão.
E. g. -
<input type="file" id="BtnBrowseHidden" name="files" style="display: none;" />
<label for="BtnBrowseHidden" id="LblBrowse">
Browse
</label>
1
Author: Prasad Shigwan, 2015-07-29 07:21:11