[AJAX] input file avec AJAX

Version imprimable

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:

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:

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'

01/09/2010, 17h18
thelvin

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é.
01/09/2010, 17h33
Bovino

Citation:

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 ;)
01/09/2010, 18h17
ju0123456789

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...
01/09/2010, 18h38
thelvin

Citation:

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.)
01/09/2010, 23h49
misakilou

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
02/09/2010, 08h48
ju0123456789

Excuse moi misakilou, mais je n'ai pas compris ton post.
Qu'est-ce que ajaxupload.js ? une librairie ?
Et comment ça tu "double clic sur un fichier" ? (depuis un site web ?)
02/09/2010, 09h35
misakilou

j'avais pas lu la fin de ton 1 er post , je me suis trompé oublie ce que j'ai dit :p
02/09/2010, 10h12
ju0123456789

Ok no probleme lol :)

Bon il n'y a apparamment que très peu de solutions... que je n'ai d'ailleurs pas encore trouvée. N'hesitez pas a revenir vers moi si quelqu'un a une solution :)

Merci bonne journée

Ju'
02/09/2010, 12h45
misakilou

heuu je vais quand même revenir , tu veux récupérer les valeurs d'un input file ?
du genre , le nom , extension ,taille... ??
02/09/2010, 12h57
ju0123456789

tout ce que je peux faire avec mes connaissances actuelles, est de récupérer le nom du fichier, mais non son contenu. Etant donné que j'ai bcp de travail, je n'ai pas encore eu le temps de regarder du coté de GetasBinary

Bonjour,

Bon j'ai légerement avancé, et ça parait possible, mais j'ai un petit souci avec le getAsBinary. j'ai testé ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  var sel = document.getElementById('inser_photo');
  if( sel != null )
  {
    document.getElementById('DIVattente').innerHTML= "<center><img src='/images/animes/attente.gif' title='En chargement...' /></center>";
    if( sel.files.length == 1 )
    {
      var variable = encodeURIComponent(sel.files[ 0 ].getAsBinary());
 
      var xhr = GetXHR();
      var url = "../html/requete-ajax.php" ;
      xhr.open("POST",url,false);
 
      var Photo = 'photo=push&filename=' + sel.files[ 0 ].fileName + '&filesize=' + sel.files[ 0 ].fileSize + 
              '&binary=' + variable;
      xhr.send( Photo );
      if(xhr.readyState == 4 && xhr.status == 200)
      {
        leselect = xhr.responseText;
        alert( leselect );
      }
    }
  }
  document.getElementById('DIVattente').innerHTML= "Fichier copie";
}

et ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function AjoutePhoto()   
{   
  var sel = document.getElementById('inser_photo');
  var xhr = new XMLHttpRequest();   
  var url = "../html/requete-ajax.php";
  xhr.open('POST', url, true);   
  var boundary = '------multipartformboundary' + (new Date).getTime();   
  var dashdash = '--';   
  var crlf     = '\r\n';   
  var requestBody = dashdash + boundary + crlf;   
  requestBody += 'content-disposition: form-data; name="photo"';   
  requestBody += '; filename="' + encodeURIComponent(sel.files[ 0 ].fileName) + '"';   
  requestBody += crlf + 'content-type: application/octet-stream' + crlf;   
  requestBody += crlf;   
  alert(requestBody);
  requestBody += sel.files[ 0 ].getAsBinary();   
  requestBody += crlf + dashdash + boundary + dashdash + crlf;   
  xhr.setRequestHeader('content-type', 'multipart/form-data; boundary='+ boundary);   
  xhr.sendAsBinary(requestBody);
}

Et ce qui TOUJOURS pose probleme est :

Code:

sel.files[ 0 ].getAsBinary()

Quelqu'un sait il pourquoi ?

07/09/2010, 09h25
Bovino

Citation:

Envoyé par ju0123456789

Ce qui TOUJOURS pose probleme est :

Code:

sel.files[ 0 ].getAsBinary()

Quelqu'un sait il pourquoi ?

C'est plus ou moins expliqué sur la doc :

Citation:

These should not be used, as they will prevent your web application from being used in other browsers, as well as in future versions of Gecko, which will likely remove these methods.

:fleche: https://developer.mozilla.org/en/DOM/File
07/09/2010, 09h28
ju0123456789

HEllo !

Bon OK getAsBinary est un element pour Mozilla apparemment.
La seule méthode qu'il me reste est la méthode de l'iframe alors ?
07/09/2010, 09h54
Bovino

Citation:

Envoyé par ju0123456789

Bon OK getAsBinary est un element pour Mozilla apparemment.

Je dirais même pour certaines versions de Mozilla ;)

Citation:

Envoyé par ju0123456789

La seule méthode qu'il me reste est la méthode de l'iframe alors ?

A mon sens, c'est encore la méthode à privilégier.
07/09/2010, 12h32
ju0123456789

d'accord ok merci.
Je vais essayer je vous tient au courant si j'ai un soucis, dans le cas contraire je considérerais ce topic comme résolu :)
bonne apres midi !

Ju'