PHP, créer un système d’upload de fichier

Parce qu’on peut avoir besoin de charger une fichier comme une image pour un avatar, l’upload de fichier est quasi-incontournable. En langage PHP, cela se fait très rapidement et surtout facilement.

Je vais te montrer cela en illustrant ave un petit exemple simple et les vérifications élémentaires.

Tu peux trouver sur mon dépôt GITHUB, les deux fichiers php de cet article. Je n’y ai pas mis les images.

Création du formulaire

Pour la réalisation de cet article, à la racine de ton site d’exemple, tu placeras le fichier index.php ainsi que le fichier upload.php, tu créeras également un dossier files où les fichiers seront uploadés.

La construction du fichier index.php se fait de cette manière :

<!doctype html>
<html lang="fr">
	<header>
		<meta charset="utf-8">
		<title>Système d'upload de fichiers</title>
	</header>
	<body>
		<h1>Système d'upload de fichier</h1>
		<form action="upload.php" method="POST" enctype="multipart/form-data">
			<input type="text" name="nom" id="id" placeholder="Nom du fichier" />
			<input type="file" name="fichier" placeholder="Fichier" />
			<input type="submit" name="envoyer" value="Envoyer le fichier" />
		</form>
	</body>
</html>

On y retrouve un formulaire standard avec ses inputs :

  • text pour le nom du fichier
  • file pour le fichier à uploader
  • submit pour le bouton

A la validation du formulaire, les données sont envoyées avec la méthode POST vers la page upload.php.

Le point important ici est l’ajout de l’attribut enctype, sans lui, le fichier ne sera pas transmis :

enctype="multipart/form-data"

Traitement PHP du fichier

Maintenant que nous avons notre zone de saisie, nous allons voir la page upload.php qui permet de traiter le formulaire.

Tout d’abord, on va s’assurer que la page est bien appelée depuis le formulaire et que le champ nom et le fichier sont bien choisis, on en profite pour gérer les erreurs :

if( isset($_POST['envoyer']) ){ // permet de s'assurer que le formulaire est bien à l'origine
	if( !empty($_POST['nom']) && !empty($_FILES['fichier']) ){ // contrôle de la présence du fichier et du nom de fichier

	} else {
		header('location: index.php?type=error&code=2');
	}
} else {
	header('location: index.php?type=error&code=1');
}

Une fois ces vérifications faites, on s’assure qu’il n’y a pas d’erreur sur le chargement du fichier :

		if( $_FILES['fichier']['error'] === 0 ){ // contrôle de l'absence d'erreur du chargement de l'image depuis le formulaire

		} else {
			header('location: index.php?type=error&code=3');
		}

Avant d’enregistrer, on va préparer un peu la manipulation :

$uploadDirectory = __DIR__.DIRECTORY_SEPARATOR.'files'.DIRECTORY_SEPARATOR; // fichier d'upload
$fileInfo = new SplFileInfo($_FILES['fichier']['name']); // préparation du fichier pour upload
$extension = $fileInfo->getExtension();
$nouveauFichier = $_POST['nom'].'.'.$extension;

On finit par déplacer le fichier en le renommant avec la fonction move_uploaded_file() et la redirection finale :

move_uploaded_file($_FILES['fichier']['tmp_name'], $uploadDirectory.$nouveauFichier);
header('location: index.php?type=success');

Gestion des messages

Dans le fichier précédent, nous avons fait des redirections en indiquant des informations, celles-là seront indiquer au rechargement de la page, nous allons donc ajouter au fichier index.php, ces informations :

<?php
if( !empty($_GET['type']) ){
	if( $_GET['type'] === 'success' ){
		$message = "Fichier enregistré avec succès";
	} elseif ( $_GET['type'] === 'error' && !empty($_GET['code']) ){
		switch ($_GET['code']) {
			case 1:
				$message = "Accès non autorisé";
				break;
			case 2:
				$message = "Saisir le champs nom et sélectionné un fichier";
				break;
			case 3:
				$message = "Erreur lors du chargement du fichier";
				break;
		}
	}
}
?>
<!doctype html>
<html lang="fr">
	<header>
		<meta charset="utf-8">
		<title>Système d'upload de fichiers</title>
	</header>
	<body>
		<h1>Système d'upload de fichier</h1>
		<?php
		if( !empty($message) ) echo '<p>'.$message.'</p>';
		?>
		<form action="upload.php" method="POST" enctype="multipart/form-data">
			<input type="text" name="nom" id="id" placeholder="Nom du fichier" />
			<input type="file" name="fichier" placeholder="Fichier" />
			<input type="submit" name="envoyer" value="Envoyer le fichier" />
		</form>
	</body>
</html>

On finit par ajouter l’affichage des liens vers les images présentes dans le fichier, on place le code suivant juste avant la balise fermante body :

	<?php
	$directory = opendir(__DIR__.DIRECTORY_SEPARATOR.'files/'); // ouverture du dossier
	echo '<ul>';
	while( ($file = readdir($directory)) ){ // parcours du dossier
		if( $file !== '.' && $file !== '..' ){
			echo '<li><a href="./files/'.$file.'">'.$file.'</a></li>';
		}
	}
	echo '</ul>';
	?>

Conclusion

L’ensemble des codes sont disponibles sur mon dépôt, bien sûr, il s’agit d’une version de base pour illustrer le fonctionnement, on imagine facilement ajouter un contrôle sur les extensions, la taille …

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.