begin process at 2012 05 28 15:01:16
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

 > 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

Note :
9,67 / 10 - par 3 personnes
9,67 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Classé sous :upload, rechargement, formulaire Niveau :Débutant Date de création :05/03/2011 Date de mise à jour :15/03/2011 21:54:24 Vu / téléchargé :4 136 / 407

Auteur : theptitprince

Ecrire un message privé
Site perso
Commentaire sur cette source (11)
Ajouter un commentaire et/ou une note

 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&eacute; avec succ&eacute;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&eacute; avec succ&eacute;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...

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 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

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec Zip Source avec une capture CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama
SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm
Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec une capture FORMULAIRE D'INSCRIPTION+VÉRIFICATION par ellissss
Source avec Zip Source avec une capture SCROLL BARS EN JAVASCRIPT SUR UNE PAGE HTML par Glennouchet
Source avec Zip Source avec une capture UPLOAD EN AJAX + FLASH (FANCY UPLOAD) par Vagners

Commentaires et avis

Commentaire de 007Julien le 06/03/2011 10:54:54

Y-aurait-il un problème caché de jeu de caractères ? Comment se fait-il que les titres et autres libellés ne comportent aucun accent ? Aucun charset sur les pages HTML ni aucun header sur les pages PHP ? C'est vraiment curieux de procéder ANSI (apparemment seul le fichier upload.php est en utf-8) !

Même si ce n'est pas toujours aisé, une ou plusieurs versions en iso-8859-1 ou 15 et utf-8 seraient les bienvenues...

Commentaire de theptitprince le 06/03/2011 11:24:46

Pour les accents, c'est normal, j'ai écris tous les textes sans accents, mais j'aurais pu les mettre en html (mais bon, a la base, ce code était un essai, donc je codais assez rapidement, et mon but n'étais pas  de faire une jolie présentation, juste un code fonctionnel).
Après, mon code est passé sur différents éditeurs de code, et sur différents système d'exploitation, d'ou le problème d'accent dans le fichier upload.php
Seul la technique m'intéressait ici
Je me suis rendu compte qu'une source un peu similaire se trouvait ici d'ailleurs:
http://www.javascriptfr.com/codes/TELECHARGEMENT-SANS-RECHARGER-PAGE_52042.aspx
Ma mienne ayant pour seul avantage le listing des fichiers une fois l'upload terminé, un message pendant et a la fin du téléchargement, ainsi que la désactivation du bouton "envoyer" pendant l'upload.
Je remettrai le code ici présent à jour une fois que j'aurais fini de l'intégrer a mon site (afin de régler les problèmes de charset et header).

Commentaire de 007Julien le 07/03/2011 00:55:23

La question des accents n'est pas seulement une question d'esthétique. Je ne suis pas certain que la fonction strtr fonctionne toujours très bien sur une page enregistrée avec le jeu de caractère utf-8. Il est souvent recommandé de l'utiliser avec un tableau associatif array("À"=>"A",...), d'autres vont jusqu'à préconiser le passage par des entités HTML (voir par exemple http://www.weirdog.com/blog/php/supprimer-les-accents-des-caracteres-accentues.html).

En toutes hypothèses, cette question semble dépendre non seulement du codage de la page (l'encodage serait un anglicisme inutile), mais encore de la configuration du serveur (que l'on peut obtenir et essayer de modifier avec setlocale) ainsi que du codage interne (mb_internal_encoding). Sur tous ces points (et bien d'autres tels que par exemple que l'inclusion de fichiers PHP de codage différents), il est malheureusement difficile de trouver des éléments de réponses éclairant un peu l'ensemble de la question...

Faudrait-il attendre, que des constructeurs anglophones, faisant fi de normes internationales dépassées - voir http://coin.des.experts.pagesperso-orange.fr/reponses/faq9_65.html) nous apportent le windows-1252 pour pouvoir écrire correctement nos 112 noms de communes comportant un ½ dont ¼uf-en-Ternois, Crèvec½ur-en-Auge ou D½uil-sur-le-Mignon ?

Ceci dit, l'expérience montre qu'il est utile de donner quelques indications aux navigateurs pour le choix du jeu de caractères (ou charset en vo). Avec des fichiers PHP, il est facile de prévoir par exemple un header("Content-Type: text/html; charset=utf-8 (iso-8859-1, iso-8859-15  ou windows-1252"); en tête de chaque fichie. Il est, en outre, recommandé de déclarer ce charset devant ou dans le fichier (X)HTML.


  

Commentaire de theptitprince le 07/03/2011 08:14:41

Donc il suffirait que je rajoute un header("Content-Type: text/html; charset=utf-8 (iso-8859-1"); au début de chacun des fichiers php? (parce que je ne suis plus sur de tout comprendre la...)

Commentaire de 007Julien le 07/03/2011 10:30:20

Oui, (conformément aux indications de la page http://www.alsacreations.com/astuce/lire/69-declarer-encodage-des-caracteres.html), il convient de prévoir sur les pages php un header correspondant au code caractère choisi (ma parenthèse n'avait pour objet que de présenter quelques alternatives).

Pour l'iso-8859-1
header("Content-Type: text/html; charset=iso-8859-1");

Pour l'iso-8859-15
header("Content-Type: text/html; charset=iso-8859-15");

Pour l'utf-8
header("Content-Type: text/html; charset=utf-8");

De plus, il est bon dans les pages (X)HTML de disposer une balise Meta adaptée au jeu de caractère telle que par exemple pour l'utf-8 :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Maintenant pour le choix du jeu de caractère voir aussi cette page http://www.alsacreations.com/astuce/lire/34-charset-iso-8859-1-iso-8859-15-utf-8-lequel-choisir.html

Avec mes excuses pour cette longue digression. Cordialement.

Commentaire de 007Julien le 07/03/2011 13:01:51 9/10

Voici, à toutes fin utiles, un script à insérer dans une page pour consulter son entête ou header:

var xmlFct=[function(){return new XMLHttpRequest()},
function(){return new ActiveXObject("Msxml2.XMLHTTP")},
function(){return new ActiveXObject("Msxml3.XMLHTTP")}]
,xmlhttp=false;
for (var i=0;i<xmlFct.length;i++) {try{xmlhttp = xmlFct[i]();} catch(e){continue;} break;}
if (xmlhttp) {xmlhttp.open("HEAD",document.location.href,true);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && 200<=xmlhttp.status && xmlhttp.status<300) alert(xmlhttp.getAllResponseHeaders())}
xmlhttp.send(null)
}
Ce script utilise ajax avec une requête de type HEAD qui permet de renseigner notamment la date de la dernière mise à jour d'une page à partir d'un xmlhttp.getResponseHeader("Last-Modified")

Commentaire de theptitprince le 07/03/2011 13:24:55

Merci pour toutes ces information 007Julien, je vais aller visiter les pages que tu m'as donné de ce pas afin de pouvoir intégrer les bons header sur chaque page.
Ne t'excuse pas pour ta longue digression, j'ai dit que j'étais ouvert à toutes remarques!

Commentaire de SimSimon le 02/07/2011 15:38:01

Bonjour,

ça ne fonctionne pas !

il me met tout le temps l'erreur: "Echec de l'upload ! " que ça soit du jpg,gif etc...

Commentaire de mariegendron le 30/03/2012 11:32:25 10/10

Excellent code - Merci !
J'ai juste une question pour mon script php.
Comment ajouter un ( preview ) d'un fichier image
avant et/ou après le téléchargement ?
(car bien sûr je n'y arrive pas toute seule !)
( voir sur ma page = http://www.mariepanic.com/gallery/mpcalendar.php )
J'ai aussi ajouté un lien vers la présente page pour vous remercier !

Commentaire de ctzenfr le 13/04/2012 14:13:24 10/10

Super!
Merci pour le code et à Marie qui a bien voulu laisser l'adresse de sa page pour le preview ;-)

Commentaire de theptitprince le 14/04/2012 00:08:08

Faire un système de preview avant chargement me semble difficile... Par contre, après chargement, cela reste facil. Dans le fichier listing, remplacez tout simplement le echo <a ..... </a> par echo "<img src='".$file."' />"; et cela devrait marcher!
Cependant, après avoir regardé rapidement votre site, je vous conseil vivement de passer au système drag'n drop pour l'upload des fichiers. Vous trouverez un excellent tuto bien expliqué en vidéo sur le site de graphikart...

 Ajouter un commentaire


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 &#224; tous J'ai un formulaire qui s'ouvre dans un popup et j'aimerai que la page principale&nbsp; 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 &lt;form name="form" method="post" action="sheet.php"&gt; 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


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,619 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales