Bonjour,
Nous
allons continuer notre tuto sur l'upload de fichier avec jquery.
Tout
d'abord créons un dossier pour notre projet, appelons le upload. Mettons y les
2 fichiers téléchargés dans la première partie de ce tuto.
A
l'intérieur du dossier créons un fichier index.php : c'est le fichier avec lequel nous allons
travaillé. Voici le contenu de ce fichier :
----- début du contenu ----
<html>
<head>
<script type="text/javascript"
src="jquery-1.4.2.js"></script>
<script type="text/javascript"
src="jquery.upload-1.0.2.js"></script>
//
chargement des fichiers jquery upload et jquery
<title>test
d'upload de fichier avec jquery</title>
// nom de notre page web
<script
type="text/javascript">
$(document).ready(function() {
$('#upload').click(function() {
lancement();
});
});</script>
// Bout
de code jquery permettant de lancer une action au clique sur l'élément avec
pour id upload
//
lancement du script d'upload
Lancement=function(){
$("#transfert").upload('upload.php',
function(data) {
if( (data=='0') || (data=='2') ) { alert("erreur, transfert échoué
!"); }
else { alert("ok, transfert réussi
!");
document.location.reload(); // rafraichissement de la page
}
}, 'html');
}
</head>
<body>
<form method="post" action="#" >
<div "
id="transfert">
<table> <tr><td >Fichier pdf joint ( taille < 2
Mo ) :</td></tr><tr><td ><input
name="fichier" id="fichier" type="file"
/></td></tr></table>
<input name="upload" type="button" id="upload"
value="Envoyer" />
</div>
</form>
//
contenu principal de notre fichier. Tout le contenu est placé dans une balise
avec pour id transfert (que vous pouvez changer). Le bouton d'action a pour id
upload (c'est en cliquant sur lui que l'on déclenche l'action jquery définit
plus haut. 2 Mo correspond en général a
la taille maximales des fichiers que l'on peut upload (biensur on peut changer
cela dans les config de son serveur)
</body>
</html>
-- fin du contenu ---
Ainsi se
termine notre fichier index.php, créez maintenant un fichier upload.php, mettez
y le contenu suivant :
<?php
$filename = basename($_FILES['fichier']['name']);
// on recupère le nom du fichier que l'on envoi dans notre champ de
fichier
if(empty($filename)) { $fich=""; $data=2;
// on teste si le champ de fichier n'est pas vide, on renvoi une
erreur
}
else if(file_exists('./'. $filename)){
$data =
"0"; $fich="";
// on teste l'existence du fichier, ici je chosit de ne pas
dupliquer, donc de refuser un doublon. Vous pouvez choisir de renommer les
fichiers
}
//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'], './'.
$filename))
{ // le retour sera à 1
$fich=$filename; $data = "1";
}
//Si l'upload du fichier à échoué
else {
$data = "2";
//La valeur de retour sera à 2
$fich="";
}
echo $data; //on affiche finalement le résultat dans la page.
?>
Comme
vous l'avez c'est ajax que l'on utilise pour faire notre traitement. Les codes
renvoyer permettront de communiquer une réponse à l'internaute sans qu'il n'y
ai eu besoin de rafraichir sa page.
Merci de
vos lectures et comme d'habitude, laissez des questions si vous avez des
incompréhensions !
Aucun commentaire:
Enregistrer un commentaire