Alice-Grafixx.de PHP/MySQL Tutorial

Multi Datei-Upload

Es taucht oefter mal die Frage auf, wie man mehrere Dateien auf einmal hochladen kann, deshalb moechte ich euch hier zeigen, wie man sowas umsetzen koennte ...

Beispiel anschauen

Step 1 - Uploadformular


Wir benoetigen ein Formular, in dem die Dateien ausgewaehlt werden koennen, die hochgeladen werden sollen.
 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
<form method="post" action="" enctype="multipart/form-data">
<fieldset>
<legend>Dateien auswaehlen</legend>
<ol id="wo">
<li><input name="datei[]" type="file" />
<input class="button small" onclick="delete_input(this);" type="button" value="loeschen" /></li>
<li><input name="datei[]" type="file" />
<input class="button small" onclick="delete_input(this);" type="button" value="loeschen" /></li>
<li><input name="datei[]" type="file" />
<input class="button small" onclick="delete_input(this);" type="button" value="loeschen" /></li>
</ol>
<p><input class="button right" onclick="add_input();" type="button" value="Datei hinzufuegen" /></p>
<br />

<input type="submit" name="sendfiles" value="Hochladen" class="button "/>

</fieldset>
</form>



Step 2 - Javascript


Unser Formular benoetigt noch ein kleines Schnippselchen Java-Script, welches uns ermoeglicht so viele <input> Felder zu erstellen, wie Dateien hochgeladen werden sollen, der Code des Java-Scripts sollte in den Head-Bereich der Seite gepackt werden.
 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 
<script type="text/javascript">
<!--

function add_input(){ // Input Feld erstellen
var wo = document.getElementById('wo');
var li = document.createElement('li');

var input = document.createElement('input');
input.type = 'file';
input.name = 'datei[]';

li.appendChild(input);
li.appendChild(document.createTextNode(' '));

var button=document.createElement('input');
button.type = 'button';
button.className = 'button small';
button.onclick=function(){delete_input(this);};
button.value = 'loeschen';

li.appendChild(button);
wo.appendChild(li);
}

function delete_input(feld){ // Input Feld loeschen
feld.parentNode.parentNode.removeChild(feld.parentNode);
}

//-->
</script>



Step 3 - PHP Teil


Jetzt haben wir zwar ein Formular, dass es uns ermoeglicht mehrere Dateien auszuwaehlen, es fehlt noch der PHP-Code der die Formulardaten verarbeitet...
 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 
<?php
if (isset($_POST['sendfiles'])){ // Sofern auf hochladen geklickt wurde

    if(!empty($_FILES['datei']['tmp_name'])){  // Pruefen ob Datei angegeben wurde
    
        $uploaddir = "files"; //Verzeichnis in das die Dateien gespeichert werden sollen
    
            foreach($_FILES['datei']['name'] as $key => $value){
            
                //  Dateigroesse pruefen => Datei darf nicht groesser als 100 000 Bytes sein (1024 byte = 1 kB)    
                if ($_FILES['datei']['size'][$key] > 0 && $_FILES["file"]["size"] < 100000){
                
                    // definiert wohin die Datei muss
                    $uploadfile = $uploaddir."/".basename($_FILES['datei']['name'][$key]);
                
                    // Datei in angegebenes Verzeichnis verschieben
                     if (move_uploaded_file($_FILES['datei']['tmp_name'][$key], $uploadfile)){ 
                        echo "<strong>".$value ."</strong> wurde erfolgreich hochgeladen <br />\n"; 
                    }
                    
                } // close dateigroesse    
             }// close foreach    
    }// close datei angegeben
} // close submit

?>


Als erstes pruefen wir ob der Hochladen Button gedrueckt wurde.

Anschliessend pruefen wir ob ueberhaupt eine Datei angegeben wurde

$uploaddir = "files"; definiert das Verzeichnis in das die Dateien gespeichert werden sollen

Mittels foreach($_FILES['datei']['name'] as $key => $value){ durchlaufen wir das Array datei[], das all unsere Dateien enthaelt, welches wir vom Formular uebergeben bekommen haben.

Mittels if ($_FILES['datei']['size'][$key] > 0 && $_FILES["file"]["size"] < 100000){ pruefen wir die Dateigroesse, die jeweils hochgeladene Datei darf nicht groesser als 100 000 Bytes sein

Mit move_uploaded_file($_FILES['datei']['tmp_name'][$key], $uploadfile verschieb die Datei dann jeweils immer in unser in $uploaddir Verzeichnis


Wichtig


Der Ordner, in den die Dateien hochgeladen werden sollen, MUSS mit CHMOD 755 ausgestattet sein, sonst lassen sich die Dateien nich hochladen.


Das war dann auch schon alles ...

Anwendunggsbeispiel mit Passwortschutz:
 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 
 111 
 112 
 113 
 114 
 115 
 116 
 117 
 118 
 119 
 120 
 121 
 122 
 123 
 124 
 125 
 126 
 127 
 128 
 129 
 130 
 131 
 132 
 133 
 134 
 135 
 136 
 137 
 138 
 139 
 140 
 141 
 142 
 143 
 144 
 145 
 146 
 147 
 148 
 149 
 150 
 151 
 152 
 153 
 154 
 155 
 156 
 157 
 158 
 159 
 160 
 161 
 162 
 163 
 164 
 165 
 166 
 167 
 168 
 169 
 170 
 171 
 172 
<?php // grafixx_multi-upload.php

session_start(); // startet die Session 

$pfad = $_SERVER['SCRIPT_NAME'];            // aktueller Pfad zur Datei

//---------------------- Logindaten --------------------------------- //
$grafixx_name = "USERNAME";                    // Loginname angeben
$grafixx_pass = "PASSWORT";                    // Loginpasswort angeben
//------------------------------------------------------------------ //

ob_start();    // startet den Ausgabepuffer
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Grafixx Multi Datei-Upload</title>
<meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="no" http-equiv="imagetoolbar" />
<meta content="de" http-equiv="Content-Language" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--

function add_input(){ // Input erstellen
    var wo = document.getElementById('wo');
    var li = document.createElement('li');
    
    var input = document.createElement('input');
        input.type = 'file';
        input.name = 'datei[]';
        
    li.appendChild(input);        
    li.appendChild(document.createTextNode(' '));

    var button=document.createElement('input');
        button.type = 'button';
        button.className = 'button small';
        button.onclick=function(){delete_input(this);};
        button.value = 'loeschen';

    li.appendChild(button);
    wo.appendChild(li);
}

function delete_input(feld){ // Input loeschen
    feld.parentNode.parentNode.removeChild(feld.parentNode);
}

//-->
</script>
</head>

<body>

<div id="ram">
    <div id="header">
        <h1>Grafixx Multi Datei-Upload</h1>
    </div>
    <div id="content">
<?php
if(!isset($_SESSION['login'])) { // wenn keine Session vorhanden => nicht eingeloggt

    if(isset($_POST['submit_login'])) { // wenn supbit gedrueckt

        $login_name = strip_tags($_POST['log_user']); // Variable definieren
        $login_pass = strip_tags($_POST['log_pass']); // Variable definieren

        if(empty($login_name) OR empty($login_pass)) { // Pruefen ob Username angegeben wurde
            $message .= 'Bitte geben Sie ihren Usernamen und das Passwort ein ... <br />'; $error = "1";
         }     
     
         if($login_name != $grafixx_name OR $login_pass != $grafixx_pass){  // Angaben auf Korrektheit pruefen
            $message .= 'Zugriff verweigert ... <br />'; $error = "1";
         }
    
        if($error != "1"){ // Wenn kein Fehler war
        
            // session handle-----------------------------
            $_SESSION['login'] = $_SERVER['REMOTE_ADDR']; // Session setzen

            header("Location: $pfad"); // Weiterleiten
        }
    
        if($error == "1"){  // Fehlermeldung ausgeben wenn vorhanden
            echo "<div class=\"error\"><h2>Error ...</h2>\n <p>$message</p></div>\n";
        }

    }
// Login Formular ausgeben    
?>
        <form action="" method="post">
            <fieldset>
            <legend><span class="color">Grafixx</span> Login</legend>
            <label>Name</label> <input name="log_user" type="text" /><br />
            <label>Passwort</label> <input name="log_pass" type="password" />
            <br />
            <br />
            <input class="button" name="submit_login" type="submit" value="Login" />
            </fieldset>
        </form>
        <?php    
} // close isset Session login
// ----------------------------------------------- Ende Login ------------------------------------- //

if(isset($_SESSION['login'])){ // Sofern Session vorhanden => eingeloggt

    if (isset($_POST['sendfiles'])){ // Sofern auf hochladen geklickt wurde

        if(!empty($_FILES['datei']['tmp_name'])){  // Pruefen ob Datei angegeben wurde
        
            $uploaddir = "files"; //Verzeichnis in das die Dateien gespeichert werden sollen
        
                foreach($_FILES['datei']['name'] as $key => $value){
                
                    //  Dateigroesse pruefen => Datei darf nicht groesser als 100 000 Bytes sein (1024 byte = 1 kB)    
                    if ($_FILES['datei']['size'][$key] > 0 && $_FILES["file"]["size"] < 100000) {
                    
                        // definiert wohin die Datei muss
                        $uploadfile = $uploaddir."/".basename($_FILES['datei']['name'][$key]);
                    
                        // Datei in angegebenes Verzeichnis verschieben
                         if (move_uploaded_file($_FILES['datei']['tmp_name'][$key], $uploadfile)){ 
                            echo "- <strong>".$value ."</strong> wurde erfolgreich hochgeladen <br />\n"; 
                        }
                        
                    } // close dateigroesse    
                 }// close foreach    
        }// close datei angegeben

    }else{// Upload Formular ausgeben
?>

<form method="post" action="" enctype="multipart/form-data">
<fieldset>
<legend>Dateien auswaehlen</legend>
    <ol id="wo">
        <li><input name="datei[]" type="file" />
            <input class="button small" onclick="delete_input(this);" type="button" value="loeschen" /></li>
        <li><input name="datei[]" type="file" />
            <input class="button small" onclick="delete_input(this);" type="button" value="loeschen" /></li>
        <li><input name="datei[]" type="file" />
                <input class="button small" onclick="delete_input(this);" type="button" value="loeschen" /></li>
        </ol>
    <p><input class="button right" onclick="add_input();" type="button" value="Datei hinzufuegen" /></p>
    <br />
<input type="hidden" name="MAX_FILE_SIZE" value="100000" /> 
<input type="submit" name="sendfiles" value="Hochladen" class="button "/>

</fieldset>
</form>

<?php
    } // close submit
} // close login

ob_end_flush(); // leert/beendet den Ausgabepuffer

?>

    </div>

    <div id="footer">        
        <p><a href="http://unnecessary.de">Grafixx Multi Datei-Upload</a> · <a href="http://alice-grafixx.de">Alice-Grafixx.de</a></p>
    </div>    
</div>
        
    
</body>
</html>



Wichtig


Bitte bedenken, dass nicht zu viele Dateien auf einmal hochgeladen werden sollten, zu viele groesse Dateien koennten zu Problemen fuehren, jeh nach Serverkonfiguration.


Tutorial Dateien herunterladen

© Alice-Grafixx.de - Printed from http://alice-grafixx.de