Comment soumettre automatiquement un formulaire de téléchargement lorsqu'un fichier est sélectionné?

154

J'ai un simple formulaire de téléchargement de fichiers. Comment le soumettre automatiquement lorsqu'un fichier a été sélectionné? Je ne veux pas que l'utilisateur clique sur le bouton Soumettre.

javascript html ram1
la source
9
Que faire si l'utilisateur sélectionne le mauvais fichier? IMO, vous devez laisser à l'utilisateur le soin de choisir quand soumettre.
Tyler Crompton le
2
@Tyler La plupart des gens sélectionneront le bon fichier et j'essaie de réduire les frictions UX. Pour les personnes qui sélectionnent le mauvais fichier, une fois qu'il a été téléchargé, elles peuvent choisir de le supprimer.
ram1
3
«la plupart des gens» prennent des décisions intelligentes, mais la plupart des gens ne le sont pas.
Phix
2
Je suis d'accord avec @TylerCrompton, les utilisateurs feront les erreurs les plus stupides et vous en blâmeront, vous pouvez ajouter une annulation après la soumission.
Ross Keddy
3
la meilleure réponse est la réponse la plus simple stackoverflow.com/a/25893747/1536309
Blair Anderson

Réponses:

194

Vous pouvez simplement appeler la submitméthode de votre formulaire en onchangecas de saisie de votre fichier.

document.getElementById("file").onchange = function() {
    document.getElementById("form").submit();
};

http://jsfiddle.net/cwvc4/73/

Alex Turpin
la source
4
Cela fonctionne dans Safari où la solution jQuery ne semble pas fonctionner. Étrange?
henrywright
2
@henrywright: Oui. Dans jQuery, l' Submit()appel déclenche l' submitévénement jQuery , mais ne déclenche pas le formulaire sous-jacent submit(). Vous pouvez bien sûr utiliser $('form')[0].submit()pour frapper l'élément DOM avec jQuery
Gone Coding
68

Dites filesimplement à -input de soumettre automatiquement le formulaire en cas de modification:

<form action="http://example.com">
    <input type="file" onchange="form.submit()" />
</form>
Développer l'extrait

Cette solution fonctionne comme ceci:

  • onchangefait que l'élément d'entrée exécute le script suivant, chaque fois que le valueest modifié
  • form fait référence au formulaire dont cet élément d'entrée fait partie
  • submit() oblige le formulaire à envoyer toutes les données à l'URL, comme spécifié dans action

Avantages de cette solution:

  • Fonctionne sans ids. Cela vous facilite la vie si vous avez plusieurs formulaires dans une seule page html.
  • JavaScript natif , pas de jQuery ou similaire requis.
  • Le code est à l' intérieur des balises html. Si vous inspectez le code HTML, vous verrez tout de suite son comportement.
slartidan
la source
48

Utilisation de jQuery:

$('#file').change(function() {
  $('#target').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
  <input type="file" id="file" value="Go" />
</form>
Développer l'extrait

Samich
la source
aussi, la même question était sur stackoverflow: stackoverflow.com/questions/4704154/…
Samich
Cette approche fonctionne-t-elle dans Safari? Je ne suis pas sûr. J'ai testé Chrome, IE et FF qui fonctionnent tous.
henrywright
@ErdalG: version jQuery fonctionnelle ajoutée ci-dessous. Cela évite ce problème.
Fini le codage le
31

JavaScript avec onchangeévénement: 

<form action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>
Développer l'extrait

jQuery .change()et .submit(): 

$('#fileInput').change(function() {
  $('#myForm').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
     <input type="file" id="fileInput">
</form>
Développer l'extrait

Alex.K.
la source
ajoutez un commentaire si vous votez pour clarifier ce qui ne va pas ou ce qui devrait être amélioré.
Alex.K.
9

La solution la plus courte est

<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
xboz
la source
2
Que diriez-vousonchange="this.form.submit()"
vikkee
1
Et pourquoi pas onchange="form.submit()"? :)
slartidan
5 
<form id="thisForm" enctype='multipart/form-data'>    
  <input type="file" name="file" id="file">
</form>

<script>
$(document).on('ready', function(){
  $('#file').on('change', function(){
    $('#thisForm').submit();
  });
});
</script>
Dhurba Baral
la source
4

Si vous utilisez déjà jQuery simple:

<input type="file" onChange="$(this).closest('form').submit()"/>
Sojtin
la source
4

Ceci est ma solution de téléchargement d'image, lorsque l'utilisateur a sélectionné le fichier.

Partie HTML:

<form enctype="multipart/form-data" id="img_form" method="post">
    <input id="img_input" type="file" name="image" accept="image/*">
</form>

JavaScript:

document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
    var upload = document.getElementById('img_input');
    var image = upload.files[0];
    $.ajax({
      url:"/foo/bar/uploadPic",
      type: "POST",
      data: new FormData($('#img_form')[0]),
      contentType:false,
      cache: false,
      processData:false,
      success:function (msg) {}
      });
};
sigi
la source
2

Essayez le code ci-dessous avec jquery: 

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<script>
$(document).ready(function(){
    $('#myForm').on('change', "input#MyFile", function (e) {
        e.preventDefault();
        $("#myForm").submit();
    });
});
</script>
<body>
    <div id="content">
        <form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
            <input type="file" id="MyFile" value="Upload" />
        </form>
    </div>
</body>
</html>
Razib Al Mamun
la source
+1 car c'est la seule méthode que j'ai trouvée qui m'a permis d'attraper l'événement de soumission avec jquery. Les autres méthodes semblent contourner l'événement de soumission, donc je ne peux pas vérifier le formulaire ou soumettre avec Ajax lors de leur utilisation. Merci
user1404617
1

Pour ceux qui utilisent .NET WebForms, une page complète peut ne pas être souhaitée. Au lieu de cela, utilisez la même onchangeidée pour que javascript clique sur un bouton caché (par exemple <asp: Button ...) et le bouton caché peut prendre le reste. Assurez-vous que vous faites un display: none;sur le bouton et non Visible="false".

peroija
la source
1

HTML

<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>

JAVASCRIPT PURE

<script type="text/javascript">
window.onload = function() {
    document.getElementById("xfilename").onchange = function() {
        document.getElementById("xtarget").submit();
    }
};
</script>
KingRider
la source
1 
<form action="http://example.com">
    <input type="file" onchange="Submit()" />
</form>

 <script>
     // it will submit form 0 or you have to select particular form
     document.getElementsByTagName("form")[0].submit();       
 </script>
Anant Dabhi
la source
0

Vous pouvez mettre ce code pour que votre code fonctionne avec une seule ligne de code

<input type="file" onchange="javascript:this.form.submit()">

Cela téléchargera le fichier sur le serveur sans cliquer sur le bouton Soumettre

Amit Kumar
la source