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

Télécharger le projet
Commenter

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...
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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)