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

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
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
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
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.
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
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
source

4

Si vous utilisez déjà jQuery simple:

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

— Sojtin
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
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
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
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
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
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
source