web-dev-qa-db-fra.com

Est-il possible de créer un bouton en tant que bouton de téléchargement de fichier?

Je suis nouveau en php. J'ai un formulaire sur lequel je place un bouton Valeur en tant que Upload MB lorsque l'utilisateur clique sur ce bouton, il redirige sur un formulaire Web où je place un contrôle de téléchargement de fichier et un fichier de téléchargement d'utilisateur ici. Voici l'image

 button

Après avoir cliqué sur ce bouton, l'utilisateur redirige sur ce formulaire

 upload form

ici l'utilisateur upload le fichier.

MA QUESTION

Est-il possible que je puisse créer mon bouton Upload Mb en tant que bouton de téléchargement de fichier? Peut-il fonctionner comme un bouton de contrôle de téléchargement de fichier?

En fait, je veux gagner du temps. Je veux que lorsque l'utilisateur clique sur le bouton Upload MB, il ne redirige pas sur le formulaire. Mais lorsque l'utilisateur clique sur le bouton Upload MB, il permet à l'utilisateur de télécharger un fichier et d'ouvrir la fenêtre de navigation. Après cela, lorsque l'utilisateur télécharge un fichier, il redirige sur le formulaire.

Pouvez-vous me dire que c'est possible ou non?

javascriptphpjqueryformsfile-upload
7
sunny

Vous pouvez conserver un <input type='file' hidden/> dans votre code et cliquer dessus à l'aide de javascript lorsque l'utilisateur clique sur le bouton"Upload MB".

Découvrez ce violon .

Voici l'extrait.

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' />

Voici le code complet.

<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>
17
Shrinivas Shukla

Manière Bootstrap

.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
user9050600
 <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
Salim Malik

Je suggérerais de convertir le bouton en libellé. appliquer le css à l'étiquette de sorte qu'il ressemble à un bouton.

par exemple. - 

        <input type="file" id="BtnBrowseHidden" name="files" style="display: none;" />
        <label for="BtnBrowseHidden" id="LblBrowse">
            Browse
        </label>
1
Prasad Shigwan