Ajax file upload mit jQuery

Veröffentlicht am

Um das hochladen von Dateien ohne eine neue Seite aufzurufen benötigen wir ein bisschen Hilfe. Hierzu benutzen wir die JavaScript Libary jQuery. Es ist auch ohne möglich jedoch Erleichtert jQuery einem das leben enorm.

 

Zunächst brauchen wir ein html form. Jedoch ersetzen wir den üblichen submit button durch einen normalen button.

 

<form id='uploader' enctype='multipart/form-data'>
<input name='file' type='file' />
<input type='button' value='Upload' />
</form>
<progress></progress>

 

Um nun die Datei an den Server zu schicken, müssen wir das click event des buttons abfangen und de Datei per ajax an das php script zu schicken. Hierzu holen wir uns die form daten und speichern sie Temporär in einer variable. Anschließend benutzen wir das ajax Objekt von jQuery um die daten zu versenden.

 

$(':button').click(function(){
            var formData = new FormData($('#uploader')[0]);
            $.ajax({
                url: 'upload.php',  //server script to process data
                type: 'POST',
                xhr: function() {  // custom xhr
                    myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ // check if upload property exists
                        myXhr.upload.addEventListener('progress',progressHandlingFunction, false); 
                        // for handling the progress of the upload
                    }
                    return myXhr;
                },
                //Ajax events
                //beforeSend: beforeSendHandler,
                //success: completeHandler,
                //error: errorHandler,
                // Form data
                data: formData,
                //Options to tell JQuery not to process data or worry about content-type
                cache: false,
                contentType: false,
                processData: false
            });
        });

 

Das php Skript sieht wie folgt aus:

 

<?php

$jahr = date('Y');
$mon = date('m');

$uploaddir = 'uploads'.DIRECTORY_SEPARATOR.$jahr.DIRECTORY_SEPARATOR.$mon.DIRECTORY_SEPARATOR;


if (! file_exists($uploaddir)) {
    mkdir($uploaddir);
}  

$uploadfile = $uploaddir . basename($_FILES['file']['name']);

//move_uploaded_file ist die Standard PHP-Funktion um Dateien auf dem Server zu verarbeiten
if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
  echo str_replace("\\", "/", $uploadfile);
} else {
  // Als echo keinesfalls false benutzen. Führt zu Konflikten mit dem Ajax-Request
  echo "error";
}

?>

Schreibe einen Kommentar