Bonjour à tous.
Aujourd’hui je vous propose de découvrir un petit plug-in jQuery très simple d’utilisation afin de réaliser des upload de fichiers en PHP.
C’est très souvent une tâche compliqué, mais avec un tout petit bout de code, vous pouvez très simplement disposez d’un formulaire Ajax tout beau et tout jolie pour vos utilisateurs.
Bref, trêve de bavardage, passons aux choses concrètes !
Avant de commencer
Le plug-in jQuery : jQuery.upload
Le nom est très clair et son utilisation très simpliste. Rien de bien pousser en revanche, pas de barre de progression mais quand on veux, on peut le faire (je n’aborderai pas ce point ici).
Donc bien évidemment, pour utiliser ce plug-in, vous devez avoir jQuery, et le plug-in. Une fois ces deux fichiers téléchargés, vous pouvez lancer votre IDE préféré et débuter l’aventure.
Organisation
Comme toujours, j’organise mes sites web avec des sous-dossiers ayant chacun leur fonction. Ici, nous allons créer un dossier ‘js’ à la racine du site web et mettre les deux fichiers précédemment téléchargés dedans.
Ensuite, il faut créer un dossier ‘upload’, toujours à la racine, qui contiendra tous les fichiers uploadés. Voici l’architecture actuelle :
- /
- js
- jquery-1.4.2.min.js
- jquery.upload-1.0.2.min.js
- upload
- js
- upload.php
- index.php
Une fois que c’est fait, on mets un petit coup de bourre et on commence le développement (ouais, je sais, ça a pris du temps).
Développement
On va créer plusieurs fichiers qui auront chacun leur rôle :
- index.php : contiendra le formulaire html pour l’upload
- upload.php : contiendra le script d’upload
Et comme on fait logeekement, on va commencer par le formulaire bien entendu.
La page index.php
<!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>Exemple d'upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.upload-1.0.2.min.js"></script>
</head>
<body>
<form action="#" method="post">
<div id="lesChamps">
<label>Nom : </label><input name="nom" value="" type="text"><br>
<label>Description : </label><input name="description" value="" type="text"><br>
<label>Fichier : </label><input name="fichier" type="file"><br> </div> <input value="Upload" id="upload_button" type="button"> </form> <div style="margin-bottom:5px;"> <p id="result" style="width:50%;text-align:center;display:block;margin:auto;"></p> </div> </body> </html>
Voici le html, pour l'instant je n'ai pas ajouté le bout de jQuery. Je préfère vous l'expliquer en détail maintenant.
Un petit peu de jQuery !
Si vous n’avez jamais utilisé jQuery, je vous conseil d’aller lire les tutos en français disponible sur leur site. C’est très enrichissant et ça permet de se familiariser avec cette merveilleuse bibliothèque.
Sinon, placez ce bout de code au sein du body de votre formulaire html ou bien dans le head :
<script type="text/javascript">
$(function() {
$('#upload_button').click(function() {
$("#lesChamps").upload('upload.php', function(retour) {
if(retour == '1'){
$('#result').html("Upload réussi");
}
else{
$('#result').html("L'upload a échoué");
}
}, 'html');
});
</script>
Alors quelques explications s’impose :
$(function() { ...
});
Ce bout de code indique que lorsque le document est prêt, on exécute la fonction implémentée à l’intérieur.
$('#upload_button').click(function() {
...
});
Ici, on indique que lorsque l’on clique sur le bouton “upload_button”, on déclenche la fonction contenue déclarée dans la méthode click().
$("#lesChamps").upload('upload.php', function(retour) {
...
}, 'html');
Voici la partie où le plug-in intervient. Ici, le clic sur le bouton viens d’être déclenché et l’upload va donc pouvoir commencer. On indique donc que l’on va poster nos champs de formulaire contenu dans la ‘div’ qui porte l’id “lesChamps”.
L’en-tête de la fonction upload est simple :
upload(script, fonctionExecute(donnesRetournees), typeDeRetour);
Comme vous pouvez le constater, on appellera le script ‘upload.php’, on exécutera la fonction que l’on définit à la volée, et le script php nous retournera du html (enfin c’est ce qu’on veux normalement).
Ensuite pour ce qui est du contenu de votre fonction, tout dépendra de vous. Moi je retourne dans mon script php soit 1 soit 0 en html, 1 pour le succès, 0 sinon. Vous pouvez renvoyer autant de valeurs que vous souhaitez afin d’être précis sur une éventuelle erreur sur l’upload ou le formulaire.
$('#result').html(...);
Cette ligne indique simplement que je change le contenu html de l’élément qui porte l’id “result”, ici un paragraphe. Cela me permet d’afficher le résultat de l’upload à l’utilisateur.
Un peu de php pour que ça fonctionne
C’est bien beau l’html, mais c’est barbant non ?
Allez, c’est pour vous, c’est cadeau, je vous donne le fichier php. Les commentaires sont directement dans le codes, je vous conseil de les lires si vous n’avez jamais fait d’upload de fichier en php.
Pour les autres, le traitement du formulaire est similaire à un traitement normal.
<?php
$filename = basename($_FILES['fichier']['name']);
if(file_exists('./upload/'. $filename)){
$data = "0"; //Si le fichier existe déjà on renvoie une erreur
}
//Si l'upload a réussi et que le fichier est correctement posé sur le serveur
else if (@move_uploaded_file($_FILES['fichier']['tmp_name'], './upload/'. $filename)) {
$data = "1"; //le retour sera à 1
$description = htmlspecialchars($_POST['description']); //récupération du champs description
$nom = htmlspecialchars($_POST['nom']); //récupération du champ nom
}
//Si l'upload du fichier à échoué
else {
$data = "0"; //La valeur de retour sera à 0
}
echo $data; //on affiche finalement le résultat dans la page.
?>
Et voilà pour le script.
Maintenant que tout est fait, vous pouvez tester, si vous rencontrez des problèmes n’hésitez surtout pas à nous demander de l’aide dans les commentaires.
Pour allez plus loin
Bien entendu, le script que je vous ai fournis ici est minimaliste, vous pouvez le sécuriser, ajouter une insertion en base ou autre. Tout est possible avec php et jQuery 😀
La documentation de jQuery.upload vous permettra d’en savoir un peu plus sur l’utilisation du plug-in, notamment concernant les type de données que peut renvoyer votre script php.
Allez, c’est fini pour aujourd’hui les zamis geek.
Je vous dis à la prochaine 😉
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Espace élève</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link type=”text/css” href=”css/ui-lightness/jquery-ui-1.8.5.custom.css” rel=”stylesheet” />
<link type=”text/css” href=”css/style.css” rel=”stylesheet” />
<script type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.8.5.custom.min.js”></script>
<script type=”text/javascript” src=”js/jquery.upload-1.0.2.min.js”></script>
<script type=”text/javascript” src=”js/sosmathematiques.js”></script>
</head><body>
JiBi
Passionné depuis toujours d'informatique au sens large, je m'intéresse í tous les domaines allant de la programmation jusqu'au hardware. J'essaye de faire partager ma passion de ce domaine en rédigeant des articles traitant de l'actualité des jeux vidéos jusqu'aux nouveautés du web.
Articles Similaires
17 Comments
Répondre à JiBi Annuler la réponse
Derniers Commentaires
dans Tutoriel : Booster la vitesse Ethernet d’un Raspberry Pi 3Bonjour Maxence, Tout à fait , comme dit dans l'article : "Le Raspberry Pi partage actuellement le même BUS entre
dans Tutoriel : Booster la vitesse Ethernet d’un Raspberry Pi 3J'ai acheté un adaptateur et l'ai installé sur mon raspberry pi 3 et ça ne fonctionne pas. Selon les recherches
dans Test du logiciel Movavi Video ConverterEn ce moment, il est possible d'obtenir 15% de CashBack, + 7€ de bonus gratuit, pour l'achat de Movavi Video
dans Les clés de licence génériques pour l’installation de Windows et OfficeBonsoir je recherche id d'installation pour office professionnel plus 2019,merci pour votre aide
Cool
Petite question, pourquoi est-ce que tu ne declare pas l’enctype dans le formulaire ?
Il n’y en a pas forcément besoin. D’un point de vue sémantique, ce serait plus juste, en revanche, niveau pratique, ça ne change rien puisque le formulaire n’est pas posté réellement compte tenu du “listener” de click sur le bouton de “submit”.
Mais d’un point de vue purement sémantique, c’est super moche 😉
Bonjour,
Ce script tombe à pic pour moi.
je veux visualiser les images AVANT de les TELECHARGER vraiment.
Mais quand je clique le bouton UPLOAD j’ai toujours la valeur ‘0’.
J’ai placé 1 echo sur la variable ‘$filename’ et elle n’est pas garnie (donc le $filename est à ‘espace’)
Ai-je la dernière version de ce script ?
Merci de me répondre.
mkel
Est-ce que ta balise de formulaire s’appelle bien “fichier”. C’est impératif pour que ça fonctionne.
Après tu le fait sur un hébergeur ou en local ?
Il me semble que certains hébergeurs ne permettaient pas (à une époque) d’utiliser les fonction comme move_uploaded_file et tout ça.
Essaye de vérifier ça déjà ^^
En fait j’ai pas trouvé la référence aux fichiers javascript :
– jquery-1.4.2.min.js
– jquery.upload-1.0.2.min.js
Je le ai changés en fait en fichiers :
– jquery.js
– jquery.form.js
Question :
Où dois-je télécharger les 2 premiers fichiers JS du haut ?
Les liens étaient dans l’intro, les voici :
http://code.jquery.com/jquery-1.4.2.min.js
http://lagoscript.org/files/jquery/upload/jquery.upload-1.0.2.min.js
Voilà pour toi 😉
bon ca marche toujours pas :
J’ai même remplacer :
par
et
par
Et là ca marche avec un retour d’erreur à 9.
Voici mon code changé comme ci-dessus :
<?php
$filename = basename($_FILES['fichier']['name']);
echo "1. Nom du fichier : " .$_FILES['fichier']['name'] ."”;
echo “2. Nom du fichier : ” .$filename .””;
if(file_exists(‘upload/’. $filename)){
$data = “0”; //Si le fichier existe déjà on renvoie une erreur
}
//Si l’upload a réussi et que le fichier est correctement posé sur le serveur
else if (@move_uploaded_file($_FILES[‘fichier’][‘tmp_name’], ‘upload/’. $filename)) {
$data = “1”; //le retour sera à 1
$description = htmlspecialchars($_POST[‘description’]); //récupération du champs description
$nom = htmlspecialchars($_POST[‘nom’]); //récupération du champ nom
}
//Si l’upload du fichier à échoué
else {
$data = “9”; //La valeur de retour sera à 0
}
echo “Retour = ” .$data; //on affiche finalement le résultat dans la page.
?>
rectif, les “par…et…par” ne se sont pas affichés dans mon message à cause des signes ‘inférieur’ et ‘supérieur’
form action=”#” method=”post”
par
form action=”upload” method=”post”
et
input value=”Upload” id=”upload_button” type=”button”
par
input value=”Upload” id=”upload_button” type=”submit”
Je vais jeter un coup d’oeil ce soir sur ton problème, j’essaye de te répondre avant demain 😉
Bonjour,
Merci pour ce script!il marche nickel chez moi! 😉 Le seul problème c’est qu’il s’exécute après les autres instructions alors que j’aimerai récupéré d’abord le nom du fichier et l’envoi a d’autre variable!!
Le fait est que c’est de l’ajax, donc du coup, si tu veux d’abord récupérer le nom de fichier avant de faire quoique ce soit, il faut faire ces dites actions dans le “onSuccess”
Bonjour, est-ce que le jquery.upload est compatible avec d’autre versions récentes de jquery ?
Je voudrais aussi savoir s’il utilise du flash ?
Normalement avec jQuery.upload, tu n’as pas d’utilisation du flash (chose pour laquelle j’aimais bien ce plug-in).
Après pour la compatibilité, je ne sais pas trop, il faut se renseigner sur le site du plug-in.
Bonjour, super tuto merci, j’aimerais savoir s’il serais facile d’implémenter une barre de progression avec ce script (toujours sans flash) ?
Merci pour l’article interessant.