Modal Cours 5 - Période 4

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
!
!
!
!
-> Le code d'erreur
bo.jpg
upload.php
Polytechnique
bo.jpg
image/jpg
103546
!
-> Le code d'erreur
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
PHP
Application Web
td
h
\
pp
d
n
i
\
cs
hp
p
.
ex
m
a
x
\
C:
Ecole Polytechnique
PHP
Application Web
td
h
\
pp
d
n
i
\
cs
hp
p
.
ex
m
a
x
\
C:
Ecole Polytechnique
PHP
Application Web
td
h
\
pp
d
n
i
\
cs
hp
p
.
ex
m
a
x
\
C:
Ecole Polytechnique
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.

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.

1. Slectionner des lments:!
!
- Un div prcis
- Tous les lments de la classe parNormal
- Tous les liens

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

dcrit par selecteur
Slectionner les liens: $("a")

dcrit par selecteur
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 ?
Slectionner llment did "toto":

$("#toto")
id ou class ?
Slectionner llment did "toto":

$("#toto")
Slectionner les lments de classe "toto":

$(".toto")
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

lensemble slectionn
Modifier le style:
Modifier la visibilit:
$("div.toto").hide()!
$("div.toto").show()!
$("div.toto").toggle()
changer la couleur
des textes de liens
Cacher
Montrer
Cacher/Montrer

lensemble slectionn
Modifier le style:
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

Modifier un attribut
$("img #cailloux").attr("src","images/project.png")
changer la source de
limage did cailloux

Rcuprer un attribut
$("img #cailloux").attr("alt")
limage did cailloux
rcuprer lattribut alt de

limage did cailloux

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

$("div#toto").class("important")!
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">!
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?!

Voir la solution?!
</div>!
170 millions!
</div><br>!
!
O W. Houston est-elle ne?!

Voir la solution?!
</div>!
Newark!
</div>
<script type="text/javascript">!
$("#tc1").toggle();!
$("#c1").click(function(){!
$("#tc1").slideToggle("slow");!
}); !
});!
</script>
Un exemple simple (mais en mieux)

A quel ge est morte W. Houston? !
Voir la solution?!
</div>!
50 ans!
</div><br>!
!
Combien a-t-elle vendu de disques?!

Voir la solution?!
</div>!

170 millions!
</div><br>!
Un clic pour montrer
O W. Houston est-elle ne?!

Voir la solution?!
</div>!
Newark!
</div>
<script type="text/javascript">!
$(".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>
!
}!
!
});!
});!
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

Transitions trop violentes?
dmo

Transitions trop violentes?
Stoppe les transitions en
cours
Masque la photo
$("#photo").stop(true,true).fadeOut("fast",function(){!
}).fadeIn("slow");!
}!
Change la photo
});!
});!
!
</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>

Photo et Tag
Parcourir
Mot cl
OK
Ajout mot cl

<div id="tags"> !
</div>!
</div>!
</form>

Photo et Tag
Parcourir
Mot cl
Mot cl
OK
Ajout mot cl

<div id="tags"> !
</div>!
</div>!
</form>
Ajout de tags: code

<div id="tags"> !
</div>!
</div>!
</form>

$("#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

<div id="tags"> !
</div>!
</div>!
</form>
on ajoute le bouton

$("#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!

Modal Cours 5 - Période 4

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Modal Cours 5 - Période 4

Uploaded by

Copyright:

Available Formats

Modal Web Cours 5

Upload de fichiers, Javascript & jQuery

type= "file": fichier

les donnes vont contenir des

Vrifier le type de fichier

Vrifier le type de fichier

Javascript & jQuery

-> Pas dinteraction avec le serveur !

-> Permet de modifier la page affiche!

Montrer / cacher des lments

jQuery: Javascript non obstrusif

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

jQuery: Javascript non obstrusif

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

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

jQuery: Javascript non obstrusif

jQuery: Javascript non obstrusif

2. Changer leur style:!

Slectionner des lments

La syntaxe pour les slecteurs est la mme quen CSS

Slectionner des lments

La syntaxe pour les slecteurs est la mme quen CSS

Slectionner les liens: $("a")

Slectionner des lments

La syntaxe pour les slecteurs est la mme quen CSS

Slectionner les liens: $("a")

Slectionner les paragraphes dans un div de classe toto:

Slectionner llment did "toto":

Slectionner llment did "toto":

Slectionner les lments de classe "toto":

Modifiez les lments slectionns

Modifiez les lments slectionns

Modifiez les lments slectionns

Modifiez les lments slectionns

Modifiez les lments slectionns

Modifiez les lments slectionns

Modifiez les lments slectionns

rcuprer lattribut alt de

Modifiez les lments slectionns

Ajouter une classe

rcuprer lattribut alt de

Comment utiliser jQuery?

Comment utiliser jQuery?

Combien a-t-elle vendu de disques?!

O W. Houston est-elle ne?!

Un exemple simple (mais en mieux)

Combien a-t-elle vendu de disques?!

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

Un clic pour montrer

O W. Houston est-elle ne?!

Galerie photos: code

Galerie photos: code

maj de lattribut src

quand on passe la souris

Problmes (et solutions)

Problmes (et solutions)

Problmes (et solutions)

Formulaire champs variables

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

Formulaire champs variables

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

Formulaire champs variables

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

Ajout de tags: code