Vous êtes sur la page 1sur 59

Modal Web Cours 5

Upload de fichiers, Javascript & jQuery

Olivier Serre
Olivier.Serre@polytechnique.edu

Upload de fichiers

Tlchargement
<form action="upload.php" method="post" enctype="multipart/form-data">!
<input type="file" name="fichier"/>!
<input type="submit" value="envoyer" />!
</form>

Tlchargement
<form action="upload.php" method="post" enctype="multipart/form-data">!
<input type="file" name="fichier"/>!
<input type="submit" value="envoyer" />!
</form>

type= "file": fichier

les donnes vont contenir des


fichiers

bo.jpg

upload.php
$_FILES['userfile']['name'] !
-> Le nom original du fichier client
!

$_FILES['userfile']['type'] !
-> Le type MIME du fichier. Non sr
!

$_FILES['userfile']['size'] !
-> La taille, en octets, du fichier tlcharg.
!

$_FILES['userfile']['tmp_name'] !
-> Le nom temporaire du fichier serveur
!

$_FILES['userfile']['error'] !
-> Le code d'erreur

Polytechnique

bo.jpg

upload.php

Polytechnique

/tmp/ab34dcn21sadf.tmp
$_FILES['userfile']['name'] !
-> Le nom original du fichier client
!

$_FILES['userfile']['type'] !
-> Le type MIME du fichier. Non sr
!

$_FILES['userfile']['size'] !
-> La taille, en octets, du fichier tlcharg.
!

$_FILES['userfile']['tmp_name'] !
-> Le nom temporaire du fichier serveur
!

$_FILES['userfile']['error'] !
-> Le code d'erreur

bo.jpg

upload.php

Polytechnique

/tmp/ab34dcn21sadf.tmp
$_FILES['userfile']['name'] !
-> Le nom original du fichier client

bo.jpg

$_FILES['userfile']['type'] !
-> Le type MIME du fichier. Non sr

image/jpg

$_FILES['userfile']['size'] !
-> La taille, en octets, du fichier tlcharg.

103546

$_FILES['userfile']['tmp_name'] !
-> Le nom temporaire du fichier serveur
!

$_FILES['userfile']['error'] !
-> Le code d'erreur

/tmp/ab34dcn21sadf.tmp

Exemple
// ex pour une image jpg!
if (!empty($_FILES['fichier']['tmp_name']) && is_uploaded_file($_FILES['fichier']
['tmp_name'])) {!
//
fichier
a bien
// exLepour
une image
jpg t tlcharg!
//
Par scurit on utilise getimagesize
plutot que les variables $_FILES!
if (!empty($_FILES['fichier']['tmp_name'])
&& is_uploaded_file($_FILES['fichier']['tmp_name']))
{
list($larg,$haut,$type,$attr)
= getimagesize($_FILES['fichier']['tmp_name']);!
// Le fichier a bien ete telecharge
echo
".$haut."
".$type."
".$attr;!
// Par$larg."
securite on
utilise getimagesize
plutot
que les variables $_FILES
//list($larg,$haut,$type,$attr)
JPEG => type=2!
= getimagesize($_FILES['fichier']['tmp_name']);
ifecho
($type
2) {!".$type." ".$attr;
$larg."==
".$haut."
(move_uploaded_file($_FILES['fichier']['tmp_name'],'images/toto.jpg'))
{!
//if
JPEG
=> type=2
echo
russie";!
if ($type
=="Copie
2) {
!
if}(move_uploaded_file($_FILES['fichier']['tmp_name'],'images/toto.jpg'))
{
else
{! "Copie russie";
echo
"echec de la copie;!
} elseecho
{
}! echo "echec de la copie";
}}} !else echo "mauvais type de fichier";}
else!
!
echo "mauvais type de fichier;!
}!

Exemple
// ex pour une image jpg!
if (!empty($_FILES['fichier']['tmp_name']) && is_uploaded_file($_FILES['fichier']
['tmp_name'])) {!
//
fichier
a bien
// exLepour
une image
jpg t tlcharg!
//
Par scurit on utilise getimagesize
plutot que les variables $_FILES!
if (!empty($_FILES['fichier']['tmp_name'])
&& is_uploaded_file($_FILES['fichier']['tmp_name']))
{
list($larg,$haut,$type,$attr)
= getimagesize($_FILES['fichier']['tmp_name']);!
// Le fichier a bien ete telecharge
echo
".$haut."
".$type."
".$attr;!
// Par$larg."
securite on
utilise getimagesize
plutot
que les variables $_FILES
fichier bien tlcharg?
//list($larg,$haut,$type,$attr)
JPEG => type=2!
= getimagesize($_FILES['fichier']['tmp_name']);
ifecho
($type
2) {!".$type." ".$attr;
$larg."==
".$haut."
(move_uploaded_file($_FILES['fichier']['tmp_name'],'images/toto.jpg'))
{!
//if
JPEG
=> type=2
echo
russie";!
if ($type
=="Copie
2) {
!
if}(move_uploaded_file($_FILES['fichier']['tmp_name'],'images/toto.jpg'))
{
on rcupre
les attributs
else
{! "Copie russie";
echo
de limage
"echec de la copie;!
} elseecho
{
}! echo "echec de la copie";
}}} !else echo "mauvais type de fichier";}
Si cest une image jpg
else!
on la stocke sous un
!
nouveau nom dans un
echo "mauvais type de fichier;!
endroit sr
}!

Vrifier le type de fichier


$allowedExtensions = array("txt", "rtf", "doc", "pdf");
if (in_array(end(explode(".", $fileName)), $allowedExtensions))!
echo "Bon type de fichier"; !
else !
echo "erreur de type";

Vrifier le type de fichier


$allowedExtensions = array("txt", "rtf", "doc", "pdf");
if (in_array(end(explode(".", $fileName)), $allowedExtensions))!
echo "Bon type de fichier"; !
else !
echo "erreur de type";

Vrification
dappartenance au
tableau autoris

Recherche de lextension
(texte aprs le dernier
caractre ".")

Javascript & jQuery

Application Web

Ecole Polytechnique

Application Web
td
h
\
pp

m
a
x
\
C:

Ecole Polytechnique
http://www.polytechnique.fr/index.php

d
n
i
\
cs

hp
p
.
ex

Application Web
td
h
\
pp

d
n
i
\
cs

hp
p
.
ex

m
a
x
\
C:

Ecole Polytechnique
http://www.polytechnique.fr/index.php

PHP

Application Web
td
h
\
pp

d
n
i
\
cs

hp
p
.
ex

m
a
x
\
C:

Ecole Polytechnique
http://www.polytechnique.fr/index.php

PHP

Application Web
td
h
\
pp

d
n
i
\
cs

hp
p
.
ex

m
a
x
\
C:

Ecole Polytechnique
http://www.polytechnique.fr/index.php

PHP

Application Web
td
h
\
pp

d
n
i
\
cs

hp
p
.
ex

m
a
x
\
C:

Ecole Polytechnique
http://www.polytechnique.fr/index.php

PHP
t
p
i
r
c
s
a
Jav ax
Aj

Javascript / jQuery
Javascript est excut par le client (navigateur web)
!

-> Pas dinteraction avec le serveur !


-

Sauf pour AJAX (Asynchronous Javascript And XML) -> Semaine prochaine

-> Permet de modifier la page affiche!


-

Montrer / cacher des lments


Formulaires nombre de champs variables
Vrification a priori de champs saisis
Affichage de cartes, Geolocalisation

jQuery: Javascript non obstrusif


CSS
!

- Sparation du fond (le HTML) et de la forme (le CSS).


- En particulier, utilisation de classes/id pour identifier des lments auxquels un
style est ensuite appliqu.

jQuery: Javascript non obstrusif


CSS
!

- Sparation du fond (le HTML) et de la forme (le CSS).


- En particulier, utilisation de classes/id pour identifier des lments auxquels un
style est ensuite appliqu.

jQuery
!

- Sparation du fond (le HTML) et du comportement (le javascript).


- En particulier, utilisation de classes/id pour slectionner des lments auxquels
un comportement est ensuite appliqu.

jQuery: Javascript non obstrusif


1. Slectionner des lments:!
!

- Un div prcis
- Tous les lments de la classe parNormal
- Tous les liens

jQuery: Javascript non obstrusif


1. Slectionner des lments:!
!

- Un div prcis
- Tous les lments de la classe parNormal
- Tous les liens

2. Changer leur style:!


!

- Couleur de fond
- Dimensions
- Visibilit

Slectionner des lments


$("selecteur"): retourne un ensemble dlments
dcrit par selecteur

La syntaxe pour les slecteurs est la mme quen CSS

Slectionner des lments


$("selecteur"): retourne un ensemble dlments
dcrit par selecteur

La syntaxe pour les slecteurs est la mme quen CSS

Slectionner les liens: $("a")

Slectionner des lments


$("selecteur"): retourne un ensemble dlments
dcrit par selecteur

La syntaxe pour les slecteurs est la mme quen CSS

Slectionner les liens: $("a")

Slectionner les paragraphes dans un div de classe toto:


$("div.toto p")

id ou class ?
id: pour distinguer un unique lment!
class: pour distinguer plusieurs lments
avec des caractristiques communes

id ou class ?
id: pour distinguer un unique lment!
class: pour distinguer plusieurs lments
avec des caractristiques communes

Slectionner llment did "toto":


$("#toto")

id ou class ?
id: pour distinguer un unique lment!
class: pour distinguer plusieurs lments
avec des caractristiques communes

Slectionner llment did "toto":


$("#toto")

Slectionner les lments de classe "toto":


$(".toto")

Modifiez les lments slectionns

Modifiez les lments slectionns


on applique ce qui suit
lensemble slectionn

Modifier le style:
$("a").css("color","red")

changer la couleur
des textes de liens

Modifiez les lments slectionns


on applique ce qui suit
lensemble slectionn

Modifier le style:
$("a").css("color","red")
Modifier la visibilit:
$("div.toto").hide()!
$("div.toto").show()!
$("div.toto").toggle()

changer la couleur
des textes de liens

Cacher
Montrer
Cacher/Montrer

Modifiez les lments slectionns


on applique ce qui suit
lensemble slectionn

Modifier le style:
$("a").css("color","red")

changer la couleur
des textes de liens

Modifier la visibilit:
$("div.toto").hide()!
$("div.toto").show()!
$("div.toto").toggle()

Cacher
Montrer
Cacher/Montrer

Modifier le contenu:
$("div.toto").append("fin div")!
$("div.toto").prepend("debut div")

Ajouter du texte
la fin
au dbut

Modifiez les lments slectionns

Modifiez les lments slectionns


Modifier un attribut
$("img #cailloux").attr("src","images/project.png")

changer la source de
limage did cailloux

Modifiez les lments slectionns


Modifier un attribut
$("img #cailloux").attr("src","images/project.png")

Rcuprer un attribut
$("img #cailloux").attr("alt")

changer la source de
limage did cailloux

rcuprer lattribut alt de


limage did cailloux

Modifiez les lments slectionns


Modifier un attribut
$("img #cailloux").attr("src","images/project.png")

Rcuprer un attribut
$("img #cailloux").attr("alt")

Ajouter une classe


$("div#toto").class("important")!

changer la source de
limage did cailloux

rcuprer lattribut alt de


limage did cailloux

Ajouter la classe
important llment
did toto

Comment utiliser jQuery?


<head>!
<script type="text/javascript" src="js/jquery.min.js">!
</script>!
<script type= "text/javascript">!
$(document).ready(function(){!
$("a").css("color", "red");!
} !
</script>!
</head>

Comment utiliser jQuery?


<head>!
<script type="text/javascript" src="js/jquery.min.js">!
</script>!
<script type= "text/javascript">!
$(document).ready(function(){!
On charge jQuery (rcupr sur
jquery.com)
$("a").css("color", "red");!
} !
</script>!
On attend que la page soit lue
</head>
par le navigateur
puis on modifie le document

Plus proprement
contient le code JS

<head>!
<script type="text/javascript" src="js/jquery.min.js"></script>!
<script type="text/javascript" src="js/code.js"></script>!
</head>

Un exemple simple
A quel ge est morte W. Houston? !
<div id= "c1" class= "mc">!
Voir la solution?!
</div>!
<div id= "tc1" class="tc">!
50 ans!
</div><br>!
!

Combien a-t-elle vendu de disques?!


<div id= "c2" class= "mc">!
Voir la solution?!
</div>!
<div id= "tc2" class="tc">!
170 millions!
</div><br>!
!

O W. Houston est-elle ne?!


<div id= "c3" class= "mc">!
Voir la solution?!
</div>!
<div id= "tc3" class="tc">!
Newark!
</div>

<script type="text/javascript">!
$(document).ready(function(){!
$("#tc1").toggle();!
$("#c1").click(function(){!
$("#tc1").slideToggle("slow");!
}); !
});!
</script>

Un exemple simple (mais en mieux)


A quel ge est morte W. Houston? !
<div id= "c1" class= "mc">!
Voir la solution?!
</div>!
<div id= "tc1" class="tc">!
50 ans!
</div><br>!
!

Combien a-t-elle vendu de disques?!


<div id= "c2" class= "mc">!
Voir la solution?!
</div>!

<div id= "tc2" class="tc">!


170 millions!
</div><br>!

Un clic pour montrer

O W. Houston est-elle ne?!


<div id= "c3" class= "mc">!
Voir la solution?!
</div>!
<div id= "tc3" class="tc">!
Newark!
</div>

<script type="text/javascript">!
$(document).ready(function(){!
$(".tc").toggle();!
$(".mc").click(function(){!
$("#t"+ $(this).attr("id")).slideToggle("slow");!
}); !
});!
</script>

Galerie photos

dmo

Galerie photos: code


<div>!
<ul>!
<li id="rossin" class="aPhoto">Dominique Rossin</li>!
<li id="serre" class="aPhoto">Olivier Serre</li>!
<li id="desprez" class="aPhoto">Baptiste Desprez</li>!
</ul>!
</div>!
<div id="image">!
<img src="rossin.jpg" id="photo"/>!
</div>
<script language="javascript" type="text/javascript">!
!

function show(name){!
$("#photo").attr('src','images/'+name+'.jpg');!
}!
!

$(document).ready(function() {!
$(".aPhoto").mouseover(function() {!
show($(this).attr("id"));!
});!
});!
!

</script>

Galerie photos: code


<div>!
<ul>!
<li id="rossin" class="aPhoto">Dominique Rossin</li>!
<li id="serre" class="aPhoto">Olivier Serre</li>!
<li id="desprez" class="aPhoto">Baptiste Desprez</li>!
</ul>!
</div>!
<div id="image">!
<img src="rossin.jpg" id="photo"/>!
</div>
<script language="javascript" type="text/javascript">!
!

function show(name){!
$("#photo").attr('src','images/'+name+'.jpg');!
}!
!

$(document).ready(function() {!
$(".aPhoto").mouseover(function() {!
show($(this).attr("id"));!
});!
});!

maj de lattribut src


pour chaque lment de
classe aPhoto

quand on passe la souris

</script>

on rcupre lid

Problmes (et solutions)


Javascript dsactiv ? on peut prvoir une photo de groupe par dfaut

dmo

Problmes (et solutions)


Javascript dsactiv ? on peut prvoir une photo de groupe par dfaut
Transitions trop violentes?

dmo

Problmes (et solutions)


Javascript dsactiv ? on peut prvoir une photo de groupe par dfaut
Transitions trop violentes?
Stoppe les transitions en
cours
<script language="javascript" type="text/javascript">!

Masque la photo

function show(name){!
$("#photo").stop(true,true).fadeOut("fast",function(){!
$("#photo").attr('src','images/'+name+'.jpg');!
}).fadeIn("slow");!
}!

Change la photo

$(document).ready(function() {!
$(".aPhoto").mouseover(function() {!
show($(this).attr("id"));!
});!
});!
!

</script>

Callback

Affiche la photo
dmo

Formulaire champs variables


Photo et Tag
Parcourir
Mot cl

OK

Ajout mot cl

<form action="chargePhoto.php" method="post">!


Photo: <input type="file" name="photo" /> !
<div id="tags"> !
Tag: <input type="text" name="tags[]"/><br/>
</div>!
<div id="validation">!
<input type="submit" value="OK" />!
</div>!
</form>

Formulaire champs variables


Photo et Tag
Parcourir
Mot cl

OK

Ajout mot cl

<form action="chargePhoto.php" method="post">!


Photo: <input type="file" name="photo" /> !
<div id="tags"> !
Tag: <input type="text" name="tags[]"/><br/>
</div>!
<div id="validation">!
<input type="submit" value="OK" />!
</div>!
</form>

Formulaire champs variables


Photo et Tag
Parcourir
Mot cl
Mot cl

OK

Ajout mot cl

<form action="chargePhoto.php" method="post">!


Photo: <input type="file" name="photo" /> !
<div id="tags"> !
Tag: <input type="text" name="tags[]"/><br/>
</div>!
<div id="validation">!
<input type="submit" value="OK" />!
</div>!
</form>

Ajout de tags: code


<form action="chargePhoto.php" method="post">!
Photo: <input type="file" name="photo" /> !
<div id="tags"> !
Tag: <input type="text" name="tags[]"/><br/>
</div>!
<div id="validation">!
<input type="submit" value="OK" />!
</div>!
</form>

<script language="javascript" type="text/javascript">!


$(document).ready(function(){!
$("#validation").prepend('<input type="button" id="ajoutTag" value="Ajout
Tag" />');!
$("#ajoutTag").click(function(){!
$("#tags").append('Tag: <input type="text" name="tags[]"/><br/>');!
});!
});!
</script>!

Ajout de tags: code


<form action="chargePhoto.php" method="post">!
Photo: <input type="file" name="photo" /> !
<div id="tags"> !
Tag: <input type="text" name="tags[]"/><br/>
</div>!
<div id="validation">!
<input type="submit" value="OK" />!
</div>!
</form>

on ajoute le bouton

<script language="javascript" type="text/javascript">!


$(document).ready(function(){!
$("#validation").prepend('<input type="button" id="ajoutTag" value="Ajout
Tag" />');!
$("#ajoutTag").click(function(){!
$("#tags").append('Tag: <input type="text" name="tags[]"/><br/>');!
});!
});!
</script>!

en cas de clic on ajoute un


champ tag

tous les champs ont le


mme nom: tags[]

Rcuprer les Tags


<?php!
foreach($_POST['tags'] as $tag){!
echo $tag.'<br />';!
}!
?>

Rcuprer les Tags


<?php!
foreach($_POST['tags'] as $tag){!
echo $tag.'<br />';!
}!
?>

Tableau contenant chaque valeur des champs de


nom tags[] du formulaire appelant.

Quelques plugins jQuery

DataTables
Tableaux:
-

Pagination

Recherche

Tri par colonne

et bien plus

http://datatables.net/examples/

jQuery File Upload

http://blueimp.github.com/jQuery-File-Upload/

Diagrammes
http://www.jqplot.com

http://www.highcharts.com

Et plein dautres

jQuery UI: http://jqueryui.com/

Voir aussi:
- http://www.jqueryrain.com/
- http://www.creativebloq.com/jquery/top-jquery-plugins-6133175

Ou essay une requte bien pense dans votre moteur de recherche prfr!