É 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

button

Depois de carregar neste botão, o utilizador redirecciona para este formulário

upload form

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ão Upload 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?

Author: sunny, 2015-07-29
Source

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' />
Aqui está o código completo. 
<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