Accueil > > > SYSTÈME D'UPLOAD DE FICHIER SANS RECHARGEMENT DE LA PAGE.
SYSTÈME D'UPLOAD DE FICHIER SANS RECHARGEMENT DE LA PAGE.
Information sur la source
Description
Bonjour. Après plusieurs heures (jours) de recherches sur internet, je doit me rendre bien compte que très peu de sources permettent un upload de fichier sans recharger la page du formulaire, ou alors seulement avec des techniques assez compliquées a mettre en oeuvre. Ceci est donc ma première source ici (enfin je crois...) Je l'ai bridé aux images, mais libre a vous de l'adapter. Normalement, ce script devrait fonctionner sur tous les navigateurs. Je ne suis pas spécialement calé en js, mais le suis beaucoup plus en php.
Source
- 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>Chargement de piece jointe sans recharger la page</title>
- <script type="text/javascript">
-
- var CS = {};
-
- CS.UploadAjax = function(){}
-
- CS.UploadAjax.callBack = function(message){
- document.getElementById('messageCallBack').innerHTML = message;
- document.getElementById('btn').value = 'Envoyer';
- document.getElementById('btn').disabled = false;
- document.getElementById('file').value = '';
- refresh_listing();
-
- }
-
- function envoyer(){
- document.getElementById('myform').submit();
- document.getElementById('btn').disabled = true;
- document.getElementById('btn').value = 'Patientez...';
- document.getElementById('messageCallBack').innerHTML = "<b><i>Chargement en cours</i></b><br/><img src='chargement.gif' />";
- }
-
- function refresh_listing(){
- var xhr_object = null;
- var position = 'listing';
- if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
- else if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
-
- xhr_object.open("GET", "listing.php", true);
- xhr_object.onreadystatechange = function(){
- if ( xhr_object.readyState == 4 )
- {
- document.getElementById(position).innerHTML = xhr_object.responseText;
- }
- }
- xhr_object.send(null);
- }
-
- </script>
- </head>
- <body>
- <table>
- <tr>
- <td width="250px" valign="top">Voici les fichiers deja presents :
- <div id="listing">
- <?php include("listing.php"); ?>
- </div>
- </td>
- <td valign="top">
- <table>
- <tr>
- <td>
- Cette page permet le chargement d'image (<10Mo)<br/>
- sans avoir a recharger la page en entiere. Le <br/>
- listing se met a jour automatiquement
- </td>
- </tr>
- <tr>
- <td align="center">
- <form id="myform" action="upload.php" enctype="multipart/form-data" method="post" target="hiddeniframe">
- <input type="file" id="file" name="file" />
- <input type="button" id="btn" value="Envoyer" onClick="envoyer()"/>
- <div id="messageCallBack"></div>
- </form>
- <iframe name="hiddeniframe" style="display:none;" src="about:blank"></iframe>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </body>
- </html>
-
- upload.php:
-
- <?php
-
- $extensions = array('.png', '.gif', '.jpg', '.jpeg');
- $extension = strrchr($_FILES['file']['name'], '.');
-
- if(!in_array(strtolower($extension), $extensions))
- {
- $data['message'] = 'Vous devez uploader un fichier de type <b>png, gif, jpg, jpeg.</b>';
- }
- if(filesize($_FILES['file']['tmp_name'])>10000000)
- {
- $data['message'] = '<b>Le fichier est trop gros...</b>';
- }
- if(!isset($data['message']))
- {
- $fichier = strtr($fichier,
- 'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ',
- 'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
- $fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier);
- if(move_uploaded_file($_FILES['file']['tmp_name'], 'upload/' . basename($_FILES['file']['name'])))
- {
- $data['message'] = '<b>Upload de <i>'.$_FILES['file']['name'].'</i> effectué avec succés !</b>';
- }
- else
- {
- $data['message'] = '<b>Echec de l\'upload !</b>';
- }
- }
-
-
- $data['page'] =
- '<!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>
- <script type="text/javascript">
- window.parent.CS.UploadAjax.callBack("{message}");
- </script>
- </head>
- <body>
- </body>
- </html>';
-
- echo preg_replace('#\{([a-z0-9\-_]*?)\}#Ssie', '( ( isset($data[\'\1\']) ) ? $data[\'\1\'] : \'\' );', $data['page']);
- ?>
-
- listing.php:
-
- <?php
- $dirname = './upload/';
- $dir = opendir($dirname);
-
- while($file = readdir($dir)) {
- if($file != '.' && $file != '..' && !is_dir($dirname.$file)){
- echo '<a href="'.$dirname.$file.'" target="_blank">'.$file.'</a><br/>';
- }
- }
-
- closedir($dir);
- ?>
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>Chargement de piece jointe sans recharger la page</title>
<script type="text/javascript">
var CS = {};
CS.UploadAjax = function(){}
CS.UploadAjax.callBack = function(message){
document.getElementById('messageCallBack').innerHTML = message;
document.getElementById('btn').value = 'Envoyer';
document.getElementById('btn').disabled = false;
document.getElementById('file').value = '';
refresh_listing();
}
function envoyer(){
document.getElementById('myform').submit();
document.getElementById('btn').disabled = true;
document.getElementById('btn').value = 'Patientez...';
document.getElementById('messageCallBack').innerHTML = "<b><i>Chargement en cours</i></b><br/><img src='chargement.gif' />";
}
function refresh_listing(){
var xhr_object = null;
var position = 'listing';
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
xhr_object.open("GET", "listing.php", true);
xhr_object.onreadystatechange = function(){
if ( xhr_object.readyState == 4 )
{
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
xhr_object.send(null);
}
</script>
</head>
<body>
<table>
<tr>
<td width="250px" valign="top">Voici les fichiers deja presents :
<div id="listing">
<?php include("listing.php"); ?>
</div>
</td>
<td valign="top">
<table>
<tr>
<td>
Cette page permet le chargement d'image (<10Mo)<br/>
sans avoir a recharger la page en entiere. Le <br/>
listing se met a jour automatiquement
</td>
</tr>
<tr>
<td align="center">
<form id="myform" action="upload.php" enctype="multipart/form-data" method="post" target="hiddeniframe">
<input type="file" id="file" name="file" />
<input type="button" id="btn" value="Envoyer" onClick="envoyer()"/>
<div id="messageCallBack"></div>
</form>
<iframe name="hiddeniframe" style="display:none;" src="about:blank"></iframe>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
upload.php:
<?php
$extensions = array('.png', '.gif', '.jpg', '.jpeg');
$extension = strrchr($_FILES['file']['name'], '.');
if(!in_array(strtolower($extension), $extensions))
{
$data['message'] = 'Vous devez uploader un fichier de type <b>png, gif, jpg, jpeg.</b>';
}
if(filesize($_FILES['file']['tmp_name'])>10000000)
{
$data['message'] = '<b>Le fichier est trop gros...</b>';
}
if(!isset($data['message']))
{
$fichier = strtr($fichier,
'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ',
'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
$fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier);
if(move_uploaded_file($_FILES['file']['tmp_name'], 'upload/' . basename($_FILES['file']['name'])))
{
$data['message'] = '<b>Upload de <i>'.$_FILES['file']['name'].'</i> effectué avec succés !</b>';
}
else
{
$data['message'] = '<b>Echec de l\'upload !</b>';
}
}
$data['page'] =
'<!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>
<script type="text/javascript">
window.parent.CS.UploadAjax.callBack("{message}");
</script>
</head>
<body>
</body>
</html>';
echo preg_replace('#\{([a-z0-9\-_]*?)\}#Ssie', '( ( isset($data[\'\1\']) ) ? $data[\'\1\'] : \'\' );', $data['page']);
?>
listing.php:
<?php
$dirname = './upload/';
$dir = opendir($dirname);
while($file = readdir($dir)) {
if($file != '.' && $file != '..' && !is_dir($dirname.$file)){
echo '<a href="'.$dirname.$file.'" target="_blank">'.$file.'</a><br/>';
}
}
closedir($dir);
?>
Conclusion
Ce code me convient parfaitement pour mon site, vous pouvez l'utiliser si bon vous semble, pensez juste a citer la source ;) Toutes les remarques pertinentes sont les bienvenues!
Attention, le fichier joint n'a pas été remis à jour...
Historique
- 05 mars 2011 21:32:19 :
- Mise au propre du code pour une meilleure relecture.
- 05 mars 2011 21:34:18 :
- Les accents du fichier upload.php n'étaient pas bons
- 05 mars 2011 21:34:18 :
- Les accents du fichier upload.php n'étaient pas bons
- 05 mars 2011 21:52:45 :
- Nettoyage du zip par un ami
- 05 mars 2011 22:03:28 :
- Diverses modifications pour une meilleure lecture.
- 15 mars 2011 21:54:24 :
- Petit correction... Un echo $erreur ne sert a rien, j'ai remplacé $erreur par $data['message'] afin de retourner le message d'erreur au formulaire (cette erreur est due à la phase de codage et de teste du code ou j'avais rendu visible l'Iframe pour voir directement les erreurs)
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Formulaire News / Upload de fichiers [ par sasuke51230 ]
Salut ! Alors voilà, j'ai créé un site WEB pour mon groupe de Musique, j'aimerait y mettre une partie News sur l'Accueil (avec les 10 news les plus ré
rechargement automatique [ par err747 ]
Bonjour à tous J'ai un formulaire qui s'ouvre dans un popup et j'aimerai que la page principale se recharge automatiquement lorsque l'inte
Message d'attente pendant upload [ par cyberrider ]
Bonjour,J'ai un formulaire qui permet d'uploader des images, je voudrais une solution pour afficher un message pendant l'upload de l'image du genre "m
Affichage du résultat du formulaire dans un <div> sans rechargement [ par jmobylette ]
Bonjour,Ayant peu de connaissance en Javascript, Ajax, j'aurais souhaité avoir de votre aide ou tout simplement un tutoriel pour effectuer ceci :J'ai
Formulaire Upload [ par rajaArabi ]
Bonjour les enfants!!est ce qu'il ya quelqu'un ki peut me faciliter la vie?je suis en train d'écrire un ptit formulaire pour upload de fichier et dan
Formulaire : rechargement [ par nougitch ]
Bonjour, J'aimerais savoir comment charger une page sur elle-même.Dans mon <form name="form" method="post" action="sheet.php"> que dois-je met
Formulaire, BDD, et tableaux: recupération de données [ par ufufy ]
Bonjour les gens Je vais essayer d'etre claire...Je dois réaliser un tableau récapitulatif d'une liste d'enregistrements de ma BDD (jusque la rien de
formulaire envoi [ par webide ]
Bonjour,J'ais crée une page avec un lien vers une popup ou les gens peuvent cliquer sur une image pour remplir un champ du formulaire. Cela fonctionne
Envoyer le contenu du formulaire et rester sur le formulaire [ par couf ]
Bonjour à Tous, une petite question de débutant qui a déja chercher sur le net et sur le forum et qui ne trouve pas.J'ai un formulaire que j'envoie à
Formulaire ajustable [ par Son_of_the_Sun ]
Bonsoir,j'aimerais générer un formulaire sur lequel l'utilisateur choisit un élement d'une liste, et remplit un textfield.Jusqu'ici, rien de plus simp
|
Derniers Blogs
IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|