Einfacher Datei-Upload mit Fortschrittsbalken mit Javascript & Ajax

Bei dem Upload von großen Dateien muss der Nutzer oft lange warten, ohne dass er weiß, wie viel Prozent der Dateien schon hochgeladen wurde.

Daher wird gerne auf einen Datei-Upload mit Javascript & Ajax gesetzt. Ein gelungenes Beispiel dafür ist Dropzone.js. Derartige Lösungen haben allerdings einen Nachteil: Als Webmaster müsst ihr die Lösung erst in euer Formular integrieren und ihr müsst eine extra PHP-Seite einrichten, die den Upload verarbeitet.

Ich habe mich gefragt: Geht es noch einfacher? Die Antwort lautet: Ja! In diesem Artikel zeige ich dir, wie du mit geringem Aufwand einen Datei-Upload mit Fortschrittsbalken über JavaScript und Ajax realisieren kannst. Du brauchst keine weitere PHP-Seite für die Verarbeitung des Uploads – nur die Zielseite, die du ohnehin schon verwendest.

Die Lösung für den Datei-Upload

Die Lösung: Wir senden mit AJAX das Formular genau so, wie PHP es an den Server senden würde. Dazu werden alle möglichen Formularinhalte automatisch ausgelesen und an den Server weitergeleitet.

Die Antwort des Servers – also den vollständigen HTML-Code für die komplette Seite – nimmt JavaScript entgegen und blendet ihn nach Abschluss des Uploads ein.

Werbung

Solange der Upload aber noch läuft, können wir mit JavaScript einen Fortschrittsbalken anzeigen lassen.

Was ist, wenn JavaScript nicht unterstützt wird? Dann wird das Formular ganz normal gesendet. Für euch bedeutet das nachher im PHP-Code, der den Upload verarbeitet, keinen Unterschied.

1. Schritt: JavaScript Code einbinden

Als Erstes bindet ihr dieses JavaScript von mir ein (diesmal mit englischer Kommentierung).

Ihr könnt den Code zum Beispiel in einer .js-Datei speichern und die Datei auf der Website mit dem Datei-Upload einbinden.

2. Schritt: Formular anpassen

Als nächstes müsst ihr euer Formular anpassen. Das geniale an dieser Lösung: Es ist nur eine winzige Änderung notwendig. Fügt dem <form> Element folgende Eigenschaft hinzu:

Davon abgesehen sind keine Änderungen notwendig.

Das Upload-Skript unterstützt sogar MAX_FILE_LIMIT und file-Elemente mit multiple Attribut. Das heißt, wenn ihr vor einem file-Element ein hidden-Feld mit den Namen „MAX_FILE_SIZE“ einbaut, wird per JavaScript vor dem Upload geprüft, ob eine Datei zu groß ist. Falls ja, wird der Upload-Vorgang abgebrochen und ein Hinweis angezeigt.

Natürlich könnt ihr das JavaScript auch so auf eure Bedürfnisse anpassen, dass beispielsweise der Prozent-Balken anders aussieht oder die Meldungen anders lauten.

Beispiel gefällig?

Das Skript in Action könnt ihr zum Beispiel beim Massen Bild Editor sehen. Wählt Dateien aus und ladet sie hoch, und schon wird JavaScript die Upload-Arbeit übernehmen.

Screenshot: So sieht der Datei-Upload mit dem Skript und Fortschrittsbalken aus (modifiziert)

Mit diesem Upload-Skript habt ihr also eine einfach umsetzende Lösung für einen Datei-Upload mit JavaScript & AJAX – und vor allem mit Fortschrittsbalken. Viel Erfolg mit dem Skript!

Einfacher Datei-Upload mit Fortschrittsbalken mit Javascript & Ajax
52 Stimme(n)


Werbung

2 Gedanken zu „Einfacher Datei-Upload mit Fortschrittsbalken mit Javascript & Ajax“

  1. Danke für das Script. Das ist genau das was ich gesucht habe. Leider funktioniert es nicht. Was habe ich falsch gemacht?

    Christliches Zentrum Sonnenbühl - Evangelische Freikirche
    <link rel="stylesheet" href="../css/" type="text/css" media="screen">

    <!--

    /* Code by Tristan Radtke, https://www-coding.de/einfacher-datei-upload-mit-javascript-ajax/ (can be used for any purposes, but please do not remove this copyright info) */
    function ajaxForm(form) {
    // Sends ajax form exactly as not-JS submit would do, shows process bar and at the end it display the answer html as new page
    // @form contains reference (e.g. given by ajaxForm(this);)

    var req = null;
    var formData = null;

    req = new XMLHttpRequest();
    formData = new FormData();

    if (req == null || formData == null) {
    // Fallback if not supported by browser //
    form.submit();
    }

    // Initialize progress info //
    document.body.innerHTML = document.body.innerHTML + 'Upload läuft.1%';

    // Get all inputs //
    var maxFileSize = null;

    for (i = 0; i < form.getElementsByTagName("input").length; i++) {
    if (form.getElementsByTagName("input")[i].type == 'file') {
    // File type //
    if (form.getElementsByTagName("input")[i].multiple) {
    // Beim multiple-Form alle Werte anhängen //
    var elementName = form.getElementsByTagName("input")[i].name;

    for (i2 = 0; i2 maxFileSize) {
    // ERROR: File is too big //
    document.getElementById('uploadProgressOverlay').parentNode.removeChild(document.getElementById('uploadProgressOverlay'));
    alert('Die Dateien sind zu groß.');
    return false;
    } else {
    // It's ok, append it //
    formData.append(elementName.substr(0, elementName.length - 2)+"["+i2+"]", form.getElementsByTagName("input")[i].files[i2]);
    }
    }
    } else {
    // Just one file //
    if (maxFileSize != null && form.getElementsByTagName("input")[i].files[0].size > maxFileSize) {
    // ERROR: File is too big //
    document.getElementById('uploadProgressOverlay').parentNode.removeChild(document.getElementById('uploadProgressOverlay'));
    alert('Die Dateien sind zu groß.');
    return false;
    } else {
    // It's ok, append it //
    formData.append(form.getElementsByTagName("input")[i].name, form.getElementsByTagName("input")[i].files[0]);
    }
    }
    } else if (form.getElementsByTagName("input")[i].type == 'checkbox') {
    // Add checkbox value only, when checked //
    if (form.getElementsByTagName("input")[i].checked) {
    formData.append(form.getElementsByTagName("input")[i].name, form.getElementsByTagName("input")[i].value);
    }
    } else {
    // Just add value //
    formData.append(form.getElementsByTagName("input")[i].name, form.getElementsByTagName("input")[i].value);
    }

    if (form.getElementsByTagName("input")[i].name == 'MAX_FILE_SIZE') {
    // Save max file size for next file element //
    maxFileSize = form.getElementsByTagName("input")[i].value;
    } else if (form.getElementsByTagName("input")[i].type != 'file') {
    // Other element than MAX_FILE_SIZE or file -> delete it //
    maxFileSize = null;
    }
    }

    // Get all select fields //
    for (i = 0; i < form.getElementsByTagName("select").length; i++) {
    // Add value //
    formData.append(form.getElementsByTagName("select")[i].name, form.getElementsByTagName("select")[i].value);
    }

    // Get all textareas //
    for (i = 0; i Overwrite HTML by req.responseText //
    document.write(req.responseText);
    document.close();
    };

    req.upload.onprogress = function(e) {
    var progress = e.position || e.loaded;
    var total = e.totalSize || e.total;
    var percent = Math.round(progress / total * 100);

    document.getElementById("uploadProgress").value = percent;
    document.getElementById("uploadPercentInfo").innerHTML = percent+"%";
    };

    // Send form //
    var formActionURL = form.action;

    if (formActionURL == '') {
    // Take current url //
    formActionURL = window.location.href;
    }

    req.open("POST", formActionURL);
    req.send(formData);
    }

    //-->

    Predigt Upload
    Hier können die Predigten hochgeladen werden!

    <?php
    if (isset($submit)) {

    //eingaben der User filtern
    function filtern($text) {
    $text = htmlspecialchars($text, ENT_QUOTES);
    $text = str_replace("+", " ", $text);
    return $text;
    }

    function sonderzeichen_entfernen($str) {
    $search = array("Ä", "Ö", "Ü", "ä", "ö", "ü", "ß", "é", "á", "ó", "&", "§", "%", "+", "#", "$", "*", "`", "´", "'", "=", "~");
    $replace = array("Ae", "Oe", "Ue", "ae", "oe", "ue", "ss", "e", "a", "o", "und", "", "", "", "", "", "", "", "", "", "", "");
    $str = str_replace($search, $replace, $str);
    return $str;
    }

    $fileName = $_FILES["datei"]["name"]; // Ursprünglicher Dateiname
    $fileTmpLoc = $_FILES["datei"]["tmp_name"]; // Temporärer Uploadname
    $fileType = $_FILES["datei"]["type"]; // Der Dateityp
    $fileSize = $_FILES["datei"]["size"]; // Größe der Datei in bytes
    $fileErrorMsg = $_FILES["datei"]["error"]; // Zeigt an ob es während dem Upload Fehler gab (0 = false, 1 = true)
    $datum = date("Y-m-d"); // Das Uploaddatum wird bestimmt!

    // Fehlerüberprüfung und Ausgabe einer Fehlermeldung wenn...
    if (!$fileTmpLoc) { // ...keine Datei gewählt wurde!
    echo 'Upload Fehlgeschlagen: Keine Predigt ausgewählt!Bitte über Durchsuchen... Datei auswählen!';
    } else if($fileSize > 104857600) { // ...die von uns festgelegte Dateigröße überschritten wird!
    echo 'Upload Fehlgeschlagen: Die Predigt darf nicht größer als 100 MB sein!';
    unlink($fileTmpLoc);
    } else if (!preg_match("/.(mp3|mp4)$/i", $fileName) ) { // ...ein unerwümschter Dateityp gewählt wurde!
    echo 'Upload Fehlgeschlagen: Falsches Dateiformat! Bitte mp3 oder mp4 verwenden!';
    unlink($fileTmpLoc);
    } else {

    $fileName = sonderzeichen_entfernen($fileName);

    // Die Datei wird in den richtigen Ordner verschoben!
    move_uploaded_file($fileTmpLoc, "../predigten/$fileName");

    // Es wird überprüft ob die Datei hochgeladen wurde und sich am richtigen Platz befindet!
    if (file_exists("../predigten/$fileName")) {
    echo 'Die Datei '.$fileName.' ('.$fileSize.') wurde erfolgreich hochgeladen!';
    } else {
    echo 'Upload Fehlgeschlagen: Rechte des Uploadordners richtig gesetzt (755)?';
    }

    $db_insert = "INSERT INTO predigtdlczs (datum, sprecher, titel, reihe, datei) VALUES ('".filtern($datum)."', '".filtern($sprecher)."', '".filtern($titel)."', '".filtern($reihe)."', '".filtern($fileName)."')"; // Neue Predigt in die DB-Tabelle "predigtdlczs" eintragen!
    mysql_query($db_insert);
    }

    }
    ?>

    Prediger / Sprecher:  
    Titel der Predigt:  
    Teil der Predigtreihe:  
    Predigt zum Hochladen auswählen:

    © Digital Media Webdesign 2013 - Audio Downloader Version 2.0 (dm-audio_downloader)

    Christliches Zentrum Sonnenbühl - Evangelische Freikirche - Bolbergstr. 22/1, 72820 Sonnenbühl-Willmandingen

    1. Hallo Daniel,

      ich kann dir leider keinen individuellen Support – zumal ohne konkrete Fehlerangabe – geben. Du solltest aber insbesondere darauf achten, den Javascript-Code in script-Tags einzubetten (< script > ohne Leerzeichen).

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Mit dem Absenden willigst du in die Veröffentlichung und Speicherung deines Kommentars ein. Eine solche Einwilligung kann jederzeit widerrufen werden.

Solve : *
15 ⁄ 5 =