Wie sende ich ein Upload-Formular automatisch, wenn eine Datei ausgewählt ist?

154

Ich habe ein einfaches Formular zum Hochladen von Dateien. Wie kann ich es automatisch senden lassen, wenn eine Datei ausgewählt wurde? Ich möchte nicht, dass der Benutzer auf die Schaltfläche Senden klicken muss.

javascript html ram1
quelle
9
Was ist, wenn der Benutzer die falsche Datei auswählt? IMO, sollten Sie es dem Benutzer überlassen, zu entscheiden, wann er eingereicht werden soll.
Tyler Crompton
2
@ Tyler Die meisten Leute werden die richtige Datei auswählen und ich versuche, die UX-Reibung zu reduzieren. Personen, die die falsche Datei ausgewählt haben, können diese nach dem Hochladen löschen.
Ram1
3
"Die meisten Menschen" treffen kluge Entscheidungen, die meisten jedoch nicht.
Phix
2
Ich bin mit @TylerCrompton einverstanden, Benutzer werden die dümmsten Fehler machen und Sie dafür verantwortlich machen. Sie können nach der Übermittlung ein Rückgängigmachen hinzufügen.
Ross Keddy
3
Die beste Antwort ist die einfachste Antwort stackoverflow.com/a/25893747/1536309
Blair Anderson

Antworten:

194

Sie können die submitMethode Ihres Formulars bei der onchangeEingabe Ihrer Datei einfach aufrufen .

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

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

Alex Turpin
quelle
4
Dies funktioniert in Safari, wo die jQuery-Lösung nicht zu funktionieren scheint. Seltsam?
Henrywright
2
@henrywright: Ja. In jQuery Submit()löst der Aufruf das jQuery- submitEreignis aus, löst jedoch nicht das zugrunde liegende Formular aus submit(). Sie können natürlich verwenden $('form')[0].submit(), um das DOM-Element mit jQuery
Gone Coding
68

Sagen Sie dem file-input einfach, dass er das Formular bei jeder Änderung automatisch senden soll:

<form action="http://example.com">
    <input type="file" onchange="form.submit()" />
</form>
Erweitern Sie das Snippet

Diese Lösung funktioniert folgendermaßen:

  • onchangeLässt das Eingabeelement das folgende Skript ausführen, wenn das valuegeändert wird
  • form verweist auf das Formular, zu dem dieses Eingabeelement gehört
  • submit() bewirkt, dass das Formular alle Daten an die URL sendet, wie in angegeben action

Vorteile dieser Lösung:

  • Funktioniert ohne ids. Es erleichtert das Leben, wenn Sie mehrere Formulare auf einer HTML-Seite haben.
  • Natives Javascript, keine jQuery oder ähnliches erforderlich.
  • Der Code befindet sich in den HTML-Tags. Wenn Sie den HTML-Code überprüfen, werden Sie sofort feststellen, dass er sich verhält.
Slartidan
quelle
48

Verwenden von 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>
Erweitern Sie das Snippet

Samich
quelle
Die gleiche Frage wurde auch auf stackoverflow gestellt: stackoverflow.com/questions/4704154/…
Samich
Funktioniert dieser Ansatz in Safari? Ich bin mir nicht sicher. Ich habe Chrome, IE und FF getestet, die alle funktionieren.
Henrywright
@ErdalG: Funktionierende jQuery-Version unten hinzugefügt. Es vermeidet dieses Problem.
Gone Coding
31

JavaScript mit onchangeEreignis: 

<form action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>
Erweitern Sie das Snippet

jQuery .change()und .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>
Erweitern Sie das Snippet

Alex.K.
quelle
Fügen Sie einen Kommentar hinzu, wenn Sie abstimmen, um zu verdeutlichen, was falsch ist oder was verbessert werden sollte.
Alex.K.
9

Die kürzeste Lösung ist

<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
xboz
quelle
2
Wie wäre esonchange="this.form.submit()"
Vikkee
1
Wie wäre es 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
quelle
4

Wenn Sie jQuery bereits einfach verwenden:

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

Dies ist meine Lösung zum Hochladen von Bildern, wenn der Benutzer die Datei ausgewählt hat.

HTML-Teil:

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

Versuchen Sie den folgenden Code mit 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
quelle
+1, da dies die einzige Methode ist, mit der ich das Submit-Ereignis mit jquery abfangen konnte. Die anderen Methoden scheinen das Submit-Ereignis zu umgehen, sodass ich das Formular nicht überprüfen oder mit Ajax senden kann, wenn ich sie verwende. Danke
user1404617
1

Für diejenigen, die .NET WebForms verwenden, ist eine vollständige Seitenübermittlung möglicherweise nicht erwünscht. Verwenden Sie stattdessen dieselbe onchangeIdee, damit Javascript auf eine versteckte Schaltfläche klickt (z. B. <asp: Button ...) und die versteckte Schaltfläche den Rest übernimmt. Stellen Sie sicher, dass Sie eine display: none;Taste drücken und nicht Visible="false".

Peroija
quelle
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
quelle
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
quelle
0

Sie können diesen Code einfügen, damit Ihr Code mit nur einer Codezeile funktioniert

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

Dadurch wird die Datei auf den Server hochgeladen, ohne auf die Schaltfläche "Senden" zu klicken

Amit Kumar
quelle