Loading...   Upload Image

Multi Datei-UploadTutorials » PHP/MySQL Tutorials » Multi Datei-Upload

Verfasst von Alice am 14.09.2009 - wurde schon 12382 mal gelesen

Kategorie: PHP/MySQL
Bewertung:
7x bewertet
Schwierigkeit: einfach
Kommentare: [ 10 ]

Tag - Schlagwort Upload Tag - Schlagwort Datei Tag - Schlagwort PHP Tag - Schlagwort Script Tag - Schlagwort Files

Multi Datei-Upload - Tutorial

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.
<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.
<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...
<?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:
<?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

Kommentar schreibenHinterlasse einen Kommentar

Du musst angemeldet sein, um einen Kommentar zu hinterlassen...

Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...


Neuste Tutorials

Neuste Forenthemen

Neuste Kommentare

       ALL-INKL.COM - Webhosting Server Hosting Domain Provider