Comment uploader un fichier en Ajax et PHP avec jQuery ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-05-03 15:38:08

Question

Comment faire pour uploader un fichier en Ajax et PHP avec jQuery ?

<form>
<input type="text" name="text" id="text">
<input type="file" name="files" id="files">
<button type="input" onclick="envoyer()">Envoyer</button>
</form>

Réponse

Pour uploader un fichier en Ajax et PHP avec jQuery, vous devez :

Inclure la librairie Ajax jQuery.
Récupérer les valeurs de votre formulaire via l'objet FormData.
Traiter le formulaire en PHP.

Fichier HTML :

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment modifier l'attribut style en JavaScript ?</title>
</head>
<body>
<form id="form">
<input type="text" name="text" id="text">
<input type="file" name="files" id="files">
<button type="input" onclick="envoyer()">Envoyer</button>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function envoyer(){
	event.preventDefault();
	if ((document.getElementById("text").value != "") && (document.getElementById("files").value != ""))
	{
	var form = $('#form')[0];
	var data = new FormData(form);
	data.append("text", document.getElementById("text").value);	
	$.ajax({	
		url : 'fichier.php',
		type : 'POST',
		enctype: 'multipart/form-data',
		data: data,
		processData: false,
		contentType: false,
		cache: false,
		timeout: 600000,
		success : function(reponse){
			alert(reponse);
		}
	});
	}
}
</script> 
</body>
</html>

Dans cet exemple on envoie le fichier dans un répertoire nommé upload. N'oubliez pas d'attribuer les droits au répertoire (CHMOD 755). On fixe ensuite le nom du fichier dans une variable nommée $files.

Fichier fichier.php :

<?php
error_reporting(E_ALL & ~E_DEPRECATED);
ini_set("display_errors", 0);
$statut = 0;
$reponse = "";

if ((isset($_POST["text"])) && (isset($_FILES["files"])))
{
	if ($_FILES["files"]["error"] != 4)
	{
		$target_dir = "upload/";
		$target_file = $target_dir . basename($_FILES["files"]["name"]);
		$image_file_type = pathinfo($target_file,PATHINFO_EXTENSION);
		$statut = 1;
		
		if ($statut == 0)
		{
			$reponse .= "Le fichier ne peut pas être envoyé";
		}
		else
		{
			$files = "nomdufichier";
			if (move_uploaded_file($_FILES["files"]["tmp_name"], "".$target_dir."".$files.".".$image_file_type.""))
			{
				$reponse .= "Le document a été envoyé avec succès";
			}
			else
			{
				$reponse .= "Le fichier n'a pas été envoyé";
			}
		}
	}
}
echo $reponse;
?>

Vous pouvez par ailleurs vérifier la taille du fichier à uploader comme ceci :

if ($_FILES["files"]["size"] > 50000000)
{
//...
}

Ou encore vérifier son extension comme ceci :

if ($image_file_type == "pdf" && $image_file_type == "PDF")
{
//...
}