[AJAX] input file avec AJAX

**ju0123456789** · 01/09/2010, 16h20

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
if( isset( $_POST['ajout_photo'] ) )
{
  if( $_FILES['inser_photo']['name'] == "" )
  {
    $ErreurPhoto = "<font face='arial' size='1' color='red'>Euh, si t'ajoutes une photo, autant que tu en s&eacute;lectionne une !! arf ^^</font>";
  }
  if( $_POST['albums'] == "NoAlbum" )
  {
    $ErreurPhoto = "<font face='arial' size='1' color='red'>Tu dois ranger la photo dans un album</font>";
  }
 
  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 = "<font face='arial' size='1' color='red'>Format de photo non support&eacute; !</font>";
      }
      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 = "<br /><span class='Erreur'>Taille trop importante, il y <b>".$SizeEnTropKo."Ko en trop</b>. [".$TailleKo."Ko]</span>";
      }
      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 = "<font size='1' color='red'>Il y a d&eacute;j&agrave; une photo nomme <b>".$PhotoInBase."</b> dans l'album <b>".$AlbumInBase."</b></font>";
            }
          }
 
          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 = "<span class='Petit'><font color='green'>Photo t&eacute;l&eacute;charg&eacute;e avec succ&egrave;s.</font></span>"; 
 
            // permet la visualisation des l'album apres l'ajout de la photo
            $IndiceAjoutPhoto = $PostInserCodeAlbum;
          }
        }
        else
        {
          $ErreurPhoto.= "<span class='Petit'>Le fichier n'a pas &eacute;t&eacute; upload&eacute; (trop gros ?) ou ";
          $ErreurPhoto.= "Le d&eacute;placement du fichier temporaire a &eacute;chou&eacute;" - " ";
          $ErreurPhoto.= "v&eacute;rifiez l'existence du r&eacute;pertoire ".$CheminPhoto."</span>";
        }
      }
    }  
    else
    {
      $ErreurPhoto = "<span class='Erreur'>Euh... tu voulais pas ins&eacute;rer une photo ?</span>";
    }
  }
}

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
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'

**thelvin** · 01/09/2010, 17h18

Fondamentalement, le problème est de lire le fichier sélectionné dans un <input file> pour l'envoyer dans une requête AJAX. À ma connaissance il n'y a rien de standardisé pour faire ça.

Je connais un moyen officiel avec Firefox pour faire ça, le FileReader.

Je suppose que les autres navigateurs proposent aussi des choses de ce genre, mais probablement pas les mêmes.

Il y a moyen de bricoler ça pour tous les navigateurs avec un bricolage compliqué avec <iframe>, je soupçonne donc que les bibliothèques JavaScript comme jQuery ou Prototype en proposent, mais si c'est le cas j'ai pas trouvé. On trouve pas mal d'exemples reposant sur du Flash, par contre.

Edit : il semble que FileReader soit une spécification HTML5 et qu'on puisse s'attendre à ce que ça soit implémenté de façon à peu près compatible par d'autres navigateurs. Pas vérifié.

**Bovino** · 01/09/2010, 17h33

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 ?"

Ce n'est pas possible

**ju0123456789** · 01/09/2010, 18h17

Bonjour et merci pour vos réponses.

Il est vrai que je ne tiens pas trop à développer un code défférent pour chaque navigateur. j'ai regardé un peu coté iframe, tout comme avec un activeX... mais ce ne sont pas les solutions que j'avais envisagées, pareil pour du flash :/

Mais ce n'est apparemment pas possible avec la methode avec laquelle je voulais travailler snif.

J'ai cru voir qu'on peu se débrouillé avec XMLHTTPREQUEST, en envoyant le fichier avec la fonction GetasBinary je crois, mais jene sais pas trop comment on l'utilise... en esperant que ce ne soit pas une fausse piste...

**thelvin** · 01/09/2010, 18h38

Envoyé par ju0123456789

J'ai cru voir qu'on peu se débrouillé avec XMLHTTPREQUEST, en envoyant le fichier avec la fonction GetasBinary je crois, mais jene sais pas trop comment on l'utilise... en esperant que ce ne soit pas une fausse piste...

On peut, c'est la même chose que FileReader mais en synchrone au lieu d'asynchrone.
Mais pareil, je doute que ce soit géré par tous les navigateurs. (Ça vaut la peine de lire et essayer les exemples, toutefois.)

**misakilou** · 01/09/2010, 23h49

Justement je suis dessus ^^ , apres je sais pas si c'est vraiment sa que tu recherche , tu a AjaxUpload.js ,je l'utilise dans mon cas quand je double clic sur un fichier cela déclenche le javascript

[AJAX] input file avec AJAX

AJAX

Vue hybride

Discussions similaires

Partager

Partager