Beliebig viele Dateiupload-Felder in einem Formular

von Benutzer gelöscht | 1 | 5641 Aufrufe

Anzeige Hier werben

Sinn dieses Scriptes

Da meist eine fest vordefinierte Anzahl an Upload-Feldern zur Verfügung stehen, kann es zu Problemen führen, wenn mehr Dateien hochgeladen werden müssen / sollen.
Das Script soll automatisch die Anzahl der Felder erhöhen sobald eine Datei ausgewählt wurde.

Das Script

 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
<script type="text/javascript">
    
    function handleFileInputs() // Sammlung
    {
        
        this.run = function() // Funktion zum Starten
        {
            handleInputs(); // Aufruf der Funktion zum Überwachen der Felder
        }
        
        function handleInputs()
        {
            files = document.getElementById('files'); // Liste per ID holen
            inputs = files.getElementsByTagName('input'); // Alle Inputs in dieser Liste holen
            for(n = 0;n < inputs.length;n++) // Alle Felder durchgehen
            {
                input = inputs[n]; // Aktuelles Feld in Variable speichern für einfachere Schreibweise
                /*
                    Achtung!
                    Ich prüfe hier nicht ob das Feld ein Upload-Feld ist.
                    Das kann optional noch eingefügt werden, ich halte es allerdings für unnötig.
                */
                input.onchange = function() // Beim ändern des Feldes
                {
                    existsFile = checkFilename(this.value);
                        // Prüfen ob ausgewählter Pfad / Datei schon in einem anderen Feld ausgewählt ist
                    if(trim(this.value) != '' && !existsFile && !existsEmptyInputs()) 
                        // trim etfernt alle Leerzeichen am Anfang und am Ende eines Strings
                        // Wertüberprüfung der oben aufgerufenen Funktion ob Datei schon ausgewählt wurde
                        // Aufruf der Funktion für das Prüfen ob bereits leere Felder vorhanden sind
                    {
                        li = document.createElement('li'); // Neues Listelement erstellen
                        liText = document.createTextNode('Datei: '); // Textknoten für neues Listelement
                        li.appendChild(liText); // Textknoten in das Listelement einfügen
                        input = document.createElement('input'); // Input-Feld erstellen
                        input.setAttribute('type', 'file'); // type des Feldes auf file setzen
                        input.setAttribute('name', 'files[]'); // name des Feldes auf files[] setzen
                        li.appendChild(input); // In das Listelement das input einfügen, hinter den Textknoten
                        files.appendChild(li); // Der Liste das Listelement einfügen, am Ende der Liste
                        handleInputs(); // Aufruf dieser Funktion für das Überprüfen der Felder
                    }
                    else if(existsFile) // Sollte Datei schon ausgewählt sein
                    {
                        alert("Fehler!\n- Datei bereits ausgewählt"); // Fehler ausgeben, dass Datei bereits ausgewählt ist
                        this.value = ''; // Inhalt des Feldes leeren
                    }
                }
            }
        }
        
        function checkFilename(FILENAME)
        {
            var i = 0;
            
            inputs = document.getElementById('files').getElementsByTagName('input');
            for(n = 0;n < inputs.length;n++)
            {
                input = inputs[n];
                if(input.value == FILENAME && trim(input.value) != '')  // Prüfen ob der Inhalt des momentanen Feldes gleich dem Übergebenen ist
                {                           // Prüfen ob der Inhalt des momentanen Feldes nicht leer ist
                    if(++i == 2) // Sollte i = 2 sein, dann true zurückgeben
                        return true;
                    /*
                        Warum 2?
                        Einmal darf dieser Pfad vorhanden sein, sonst darf man diese Datei überhaupt nicht auswählen wenn man auf 1 prüfen würde
                    */
                }
            }
            
            return false;
        }
        
        function existsEmptyInputs() {
            
            inputs = document.getElementById('files').getElementsByTagName('input');
            for(n = 0;n < inputs.length;n++)
            {
                input = inputs[n];
                if(trim(input.value) == '') // Prüfen ob der Inhalt des aktuellen Feldes leer ist, wenn ja true zurückgeben
                    return true;
            }
            
            return false;
        }
        
        function trim(STRING)
        {
            if(STRING != null)
                return STRING.replace(/^\s+/, '').replace(/\s+$/, ''); // Entferne alle Leerzeichen am Anfang und am Ende des übergeben Strings
            else
                return '';
        }
    }
    
    window.onload = function() // Bei Aufruf der Seite
    {
        inputs = new handleFileInputs(); // Initialisieren der Sammlung
        inputs.run(); // Starten der Überwachung für die Felder
    }
    
</script>

<form action="#" method="post" enctype="multipart/form-data">
    <fieldset>
        <ol id="files">
            <li>Datei: <input type="file" name="files[]" /></li>
        </ol>
        <input type="submit" />
    </fieldset>
</form>

Diese Funktion ist als Sammlung zu sehen, in dieser sind alle nötigen Funktionen enthalten.

Der Feldname files[]

Dieser dient dazu auf die Dateien wie auf ein Array zugreifen zu können

Verarbeitung in PHP
 
PHP
1
2
3
4
5
6
7
<?php
if(isset($_POST['upload']))
{
    foreach(array_keys($_FILES['files']['tmp_name']) AS $i)
        move_uploaded_file($_FILES['files']['tmp_name'][$i], './uploads/'.$_FILES['files']['name'][$i]);
}
?>
Über den Autor: Benutzer gelöscht
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten