input file avec aJAXRésolu

Question

Bonjour,

J'ai une page qui permet de pouvoir ajouter des photos dans un albums, sur mon site. ça marche tres bien... en PHP !

Mais je voudrais éviter tout rechargement de page et donc le faire en AJAX.
Le probleme, est "comment recuperer toutes les valeurs du fichier en ajax ?"

Voici mon programme d'origine en PHP qui fonctionne bien :


if( isset( $_POST['ajout_photo'] ) )
{
  if( $_FILES['inser_photo']['name'] = = "" )
  {
    $ErreurPhoto = "Euh, si t'ajoutes une photo, autant que tu en sélectionne une !! arf ^^";
  }
  if( $_POST['albums'] == "NoAlbum" )
  {
    $ErreurPhoto = "Tu dois ranger la photo dans un album";
  }
  
  if( $_FILES['inser_photo']['name'] != "" && $_POST['albums'] != "NoAlbum" )
  {
    $PostInserCodeAlbum = $_POST['albums'];

    // on teste la prsence de l'envoi du bouton d'ajout de photo
    if( $_FILES['inser_photo']['name'] != "" )
    {
      $NomPhoto = $_FILES['inser_photo']['name'];
      $ElementsPhoto = pathinfo($NomPhoto);
      $Extension = $ElementsPhoto['extension'];
      $ExtMaj = strtoupper($Extension);
      if( $ExtMaj != 'JPG' && $ExtMaj != 'GIF' && $ExtMaj != 'TIF' && $ExtMaj != 'BMP' )
      // renvoi 'image/gif'  ... donc on prend 'image' et si les 5 premiers caracteres du type ne forment pas "image" c'est que ce n'est pas une image
      //if(substr($_FILES['inser_photo']['type'],0,5) != 'image')
      {
        $ErreurPhoto = "Format de photo non supporté !";
      }
      elseif($_FILES['inser_photo']['size'] > '4000000')
      {
        $SizeEnTropKo = ($_FILES['inser_photo']['size'] - 4000000)/1024;
        $SizeEnTropKo = sprintf('%.02f',$SizeEnTropKo);
        $TailleKo = $_FILES['inser_photo']['size']/1024;
        $TailleKo = sprintf('%.02f',$TailleKo);
        $ErreurPhoto = "
Taille trop importante, il y  ".$SizeEnTropKo."Ko en trop . [".$TailleKo."Ko]";
      }
      else
      {
        // on remplace certains caractres spciaux par leur correspondant en ASCII - Caractre normal autoris pour l'enregistrement correct du fichier
        $NomPhoto  = strtr($NomPhoto, '', 'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');

        //on remplace chacun de ces caractres par '_'
        $NomPhoto =  preg_replace('/([^.a-z0-9]+)/i', '_', $NomPhoto);

        // on remplace les espaces que peuvent contenir les fichiers par '_'
        $NomPhoto = str_replace(" ", "_", $NomPhoto );
       $Conn = mysql_connect($host,$user,$pwd);
        mysql_select_db($bdd,$Conn);
        $sql "select CODE_SORTIE from albums where CODE_DOSSIER '".$PostInserCodeAlbum."' ";
        $res = mysql_query($sql);
        while($data = mysql_fetch_assoc($res))
        {
          $CodeSortie_by_CodeAlbum = $data['CODE_SORTIE'];
        }
        mysql_close($Conn);
        $EmplacementPhoto = "..".$CheminPhotos.$CodeSortie_by_CodeAlbum."/".$PostInserCodeAlbum."/";

        if(move_uploaded_file($_FILES['inser_photo']['tmp_name'], $EmplacementPhoto.$NomPhoto))
        {
          $Conn = mysql_connect($host,$user,$pwd);
          mysql_select_db($bdd,$Conn);
          mysql_query("SET NAMES 'UTF-8'");

          $sql= "select PHOTO,ALBUM from photos";
          $res = mysql_query($sql);
          while($data = mysql_fetch_assoc($res))
          {
            $PhotoInBase = $data['PHOTO'];
            $AlbumInBase = $data['ALBUM'];

            if( ( $PhotoInBase $NomPhoto ) && ( $AlbumInBase $PostInserCodeAlbum ) )
            {
              $DoublonPhoto = "Il y a déjà une photo nomme  ".$PhotoInBase."  dans l'album ".$AlbumInBase."";
            }
          }

          if ( !isset( $DoublonPhoto ) )
          {
            // ** S'il n'y a pas de doublons sur le nom de photo dans un mme album, ***************************************** //
            // ** On verifie que le GUID que l'on va gnrer existe dj ou non, si oui (quasi impossible), on en recr un ** //
            $GUIDPhoto  = Random(32);
            $sql_VerifGuid "select ID_PHOTO from photos where ID_PHOTO '".$GUIDPhoto."' ";
            $res_VerifGuid = mysql_query($sql_VerifGuid);
            if( mysql_num_rows( $res_VerifGuid ) > 0 )
            {
              $GUIDPhoto = Random(32);
              $res_VerifGuid = mysql_query($sql_VerifGuid);
            }
            $sql = "insert into photos (ID_PHOTO,PHOTO,EXTENSION,ALBUM,AJOUTE_PAR,DATE_AJOUT,IP_AJOUT) values ";
            $sql.= "('$GUIDPhoto','$NomPhoto','$Extension','$PostInserCodeAlbum','$SessionLogin','$date','$ip') ";
            $res=mysql_query($sql);
            mysql_close($Conn);

            $ValidePhoto = "Photo téléchargée avec succès."; 

            // permet la visualisation des l'album apres l'ajout de la photo
            $IndiceAjoutPhoto = $PostInserCodeAlbum;
          }
        }
        else
        {
          $ErreurPhoto.= "Le fichier n'a pas été uploadé (trop gros ?) ou ";
          $ErreurPhoto.= "Le déplacement du fichier temporaire a échoué" - " ";
          $ErreurPhoto.= "vérifiez l'existence du répertoire ".$CheminPhoto."";
        }
      }
    }  
    else
    {
      $ErreurPhoto = "Euh... tu voulais pas insérer une photo ?";
    }
  }
}


Pour préparer mon AJAX, mon input de type submit s'est transformé en type BUTTON, où j'appelle ma fonction AJAX nommée AjoutPhoto().
Cette fonction donne : 

function AjoutePhoto()
{
  var xhr = GetXHR();
  xhr.onreadystatechange = function()
  {
    if(xhr.readyState 4 && xhr.status 200)
    {
      leselect = xhr.responseText;
      document.getElementById('DIVAjoutPhoto').innerHTML = leselect;
    }
  }
  url = "../html/requete-ajax.php" ;
  xhr.open("POST",url,false);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  sel = document.getElementById('inser_photo');
  Photo = sel.value;
  xhr.send('foto=' + Photo);
}


LA variable "foto" renvoi bien le nom de la photo contenue dans l'input file, mais ensuite, comment dois-je faire pour executer correctement mon programme sur ma page "requete-ajax.php" appelée par ma fonction AjoutPhoto() ?

Merci bcp d'avance.

Ju'

jediNoobiewan · Accepted Answer

Bonjour,

Il est à ma connaissance impossible de faire de l'upload de fichier en Ajax, si tu veux éviter le rechargement de la page il faut passer par une iframe.



@++

payetonju · Answer

Oui merci c'est ce que j'ai vu. Et est-il possible de sélectionner plusieurs fichiers ?

jediNoobiewan · Answer

Les inputs file classique ne te permettent pas de sélectionner plusieurs fichiers, tu es obligé de passer par des mini-applis flash ou silverlight.
Il existe un truc vraiment bien pour du multiupload : FancyUpload va voir sur google ;)
Je l'ai déjà utilisé ya un moment et ça fait ce que tu recherches.



@++

payetonju · Answer

Merci énormément, malgré avori cherché je n'ai aps trouvé réponse à cette question. Maintenant que j'ai le nom d'un petit soft ça devrait gérer.

Merci encore bonne journée
Ju'

Input file avec aJAX

4 réponses

Votre réponse

Discussions similaires