jQuery: Dateien über ein AJAX-Formular hochladen
jQuery-Logo (Quelle: brand.jquery.org)

jQuery: Dateien über ein AJAX-Formular hochladen

Normalerweise können Dateien nicht via AJAX hochgeladen werden. Mit einem kleinen Trick und jQuery funktioniert es aber.

Um eine Datei hochladen zu können, wird ein normales Formular benötigt. Diese Formular hat noch keine besonderen Eigenschaften und funktioniert auch ohne JavaScript bzw. AJAX. Das Formular kann zum Beispiel so aussehen:

Formular für den Datei-Upload

1
2
3
4
<form enctype="multipart/form-data" method="post" action="/upload.php">
   <input type="file" name="file" />
   <button type="submit">Datei hochladen</button>
</form>
Mit einem Doppelklick kann der gesamte Code markiert werden.

Da der Datei-Upload nicht durch AJAX durchgeführt werden kann, muss ein kleiner Umweg verwendet werden. Dazu wird beim Absenden des Formulars ein IFrame erzeugt. Das IFrame hat ein name-Attribut, welches in diesem Beispiel den Wert uploadiframe hat. Beim Absenden des Formulars wird das target-Attribut des Formulars auf den Namen des IFrames gesetzt. Der Request wird also an das IFrame geschickt und nicht an die aktuelle Seite.

Zusätzlich dazu wird ein load-Eventhandler an das IFrame gebunden, welches die Fertigstellung vom Upload überwacht. Sobald die Datei hochgeladen wurde, reagiert der Eventhandler und es kann beispielsweise eine Nachricht angezeigt werden.

jQuery-Code für den Datei-Upload per AJAX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function()
{
   //Submit-Event an das Formular binden
   $('form').submit(function()
   {
      //IFrame erzeugen
      $('body').append('<iframe name="uploadiframe" src="/upload.php" ></iframe>');
      
      //Ziel des Formulars auf das IFrame verweisen
      $(this).attr('target','uploadiframe');
      
      //Load-Event an das IFrame binden
      $('#uploadiframe').load(function()
      {
         //Datei wurde hochgeladen
      })
   });
})
Mit einem Doppelklick kann der gesamte Code markiert werden.

Mit jQuery wird ein submit-Eventhandler an das Upload-Formular gebunden. Beim Hochladen einer Datei wird die Anfrage nicht durch das Formular versendet, sondern durch jQuery übernommen.

Geschrieben von: Jens Richter