Système d'upload de fichier sans rechargement de la page.

Soyez le premier à donner votre avis sur cette source.

Vue 10 487 fois - Téléchargée 1 121 fois

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 / Exemple :


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...

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
14
Date d'inscription
dimanche 3 décembre 2006
Statut
Membre
Dernière intervention
5 janvier 2012

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 par echo ""; 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...
Messages postés
10
Date d'inscription
jeudi 8 juillet 2004
Statut
Membre
Dernière intervention
7 août 2010

Super!
Merci pour le code et à Marie qui a bien voulu laisser l'adresse de sa page pour le preview ;-)
Messages postés
2
Date d'inscription
mardi 14 janvier 2003
Statut
Membre
Dernière intervention
25 novembre 2003

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 !
Messages postés
9
Date d'inscription
mardi 16 novembre 2004
Statut
Membre
Dernière intervention
30 avril 2007

Bonjour,

ça ne fonctionne pas !

il me met tout le temps l'erreur: "Echec de l'upload ! " que ça soit du jpg,gif etc...
Messages postés
14
Date d'inscription
dimanche 3 décembre 2006
Statut
Membre
Dernière intervention
5 janvier 2012

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!
Afficher les 11 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_theptitprince)