AJAX et <input type="file">

Bonjour à vous ^^!

C'est la première fois que je POST ici, j'espère ne pas enfreindre les règles qui s'appliquent à ce forum .

J'ai donc une question liée à AJAX.
Je travaille sur cette méthode depuis déjà quelques semaines et pense en avoir saisi les rudiments.

J'envoi très aisément des valeurs issue de champ type TEXT puis récupère des données en retour XML ou TEXT.
Mais là où je coince c'est pour envoyer sans recharger la page un fichier [via un champ type FILE]. J'ai bien trouver de multiple site traitant ce problème mais aucun explicant clairement la méthode pour attacher/envoyer un fichier via AJAX.

En espérant que vous pourrez m'aider... merci davance !

Bon week end à tous .

Just

Mmmhh, si c'était faisable, cela signifierait qu'il est possible via javascript de lire un fichier sur la machine du client, donc un sacré trou de sécurité. A mon avis, on peut pas.

Merci pour cette réponse rapide .

Hum je ne veux pas agir sur l'input de type fichier mais simplement récupéré les données que l'utilisateur à renseigné exactement comme on le ferais si il validait le formulaire en question et qu'on retraitais les infos lors du rechargement de la page [$_FILE...].

Cad je veux faire exactement pareil, simplement j'aimerais envoyer ce formualire contenant un fichier via AJAX .

En espérant avoir été plus clair.... :s.

Bonne nuit!

Bonjour,
J'ai le même avis que Lanza : ce serait une super faille de sécurité.
Si tu es un fan invétéré d'IE, et si tu es courageux, il te reste peut-être encore les ActiveX...

Bonjour à vous!

Visiblement je m'exprime vraiment mal ^^!

Je ne souhaite pas exploiter différement ou plus le champ de type fichier que si on le validait de façon classique en envoyant le formulaire en méthode POST via une requête HTTP classique. D'ailleurs je souhaite l'envoyer via une requête HTTP! Simplement cette requête sera effectuer par un objet XmlHTTPRequest cad via une méthode AJAX.
Via la méthode send() de ce dernier objet on peut joindre des paramêtre/valeurs. Il est donc très facile de joindre des infos type TEXT... mais moi je souhaiterais y joindre un fichier .

J'ai déjà trouvé des méthodes supposant ce type de transfert... avec des suites de streaming différents O_o, ou autre formule magique qui se sont avéré innéficasses ou inapropriées.

Et je ne suis pas vraiment un inconditionnel de IE . Je code un site grand public et j'aimerais donc une compatibilité sous IE et FireFox. Oui, oui j'aime simplifier les choses!

Bon week end à vous!

Just

Oui, mais pour envoyer par POST le fichier désigné par l'utilisateur, il faut bien que tu le lise sur le disque dur. Or, ceci n'est pas possible...

Presque Laurent !

Sauf que ça n'est pas vraiment un upload asynchrone, AJAX ne sert dans le cas pointé par ton article qu'à afficher la barre de progression, l'upload en lui-même étant effectué par un "bête" post de formulaire dans un <iframe> plus ou moins invisible.

Ça reste de la bidouille et peut devenir problématique pour la gestion des erreurs, car ne serait-ce que récupérer le code de réponse HTTP n'est pas évident dans ce cas.

Nez en moins, l'article explique bien qu'on ne peut pas (et c'est voulu), lire le contenu d'un fichier sur la machine cliente via javascript, ce qui serait nécessaire pour le poster avec l'objet XMLHttpRequest.
Modifié par Lanza (17 Dec 2005 - 21:08)

Sorry, je n'avais pas vu le bidouillage de l'iframe (j'avoue avoir péché ce lien dans ma liste des lectures en retard ). Bof, bof, bof, en effet.

J'suis un éternel incompris ^^...

Réponse à QuentinC
Sans manquer de respect à personne... quand tu l'envoi via un formulaire classiqe [un input FILE un input SUBMIT le tout dans un FORM avec method POST]... par le plus pur des hasards... ne serait-il pas envoyé par "POST" et, au préalable, lu sur le disque ?

Je pense qu'il est parfois plus simple de dire que l'on ne sait pas plutôt que de contourner le problème en le ridiculisant .

réponse à Laurent:
J'avais déjà pris connaissance de cette méthode via ce même Blog. Comme il a été souligné ce n'est pas vraiment ce que je recherche . Mais merci tout de même d'avoir pris le temps de faire une recherche .

Merci quand même à vous...

Just

NB: je travail avec un devellopeur indien qui devrait trouver la solution sous peu... enfinje l'espère.
Modifié par Just (18 Dec 2005 - 20:21)

Just : c'est toi qui ne comprend pas, et personne ne cherche à te ridiculiser.

Le POST de formulaire avec ou sans <input type="file"> est géré par le navigateur. Tu ne peux pas poster automatiquement un formulaire via XMLHttpRequest.

Tu dois lire les variables unes à une dans tes champs et créer toi même la requête HTTP POST. Pour poster un fichier, la requête POST doit contenir le CONTENU de ce fichier. Or, tu n'y as pas accès.

Lors d'un post de formulaire, le navigateur lit effectivement le contenu du fichier et crée la requête http tout seul puis l'envoie, via une procédure automatique et non modifiable ni contrôlable, à laquelle tu n'as donc pas accès par javascript, pour des raisons de sécurité comme expliqué plus haut.

Bonsoir!

Et bien voilà une réponse parfaite et il est vrai qu'a présent je me représente mieux la séquence éxécutée lors de la pseudo-soumission d'un formulaire via un objet XmlHTTPRequest().
Et de par ce fait pourquoi il n'est pas possible de transférer un fichier.

Merci à vous .
NB : je n'ai jamais voulu critiquer ou nuire à qui que ce soit simplement il est bon de toujours reprendre les choses de la base puisque c'est généralement cette dernière qui est bancale... ce fut, une fois de plus, le cas.

Ah merci Than, c'est pas mal, ça. Bon évidemment le souci c'est que ça ne fonctionne que sous Mozilla/Firefox.

Ouep, j'avais consulter cette doc très interressante sur xulfr!

La méthode est à étudier, les streammings successifs c'est une idée.
Mais comme le fesais remarquer, à juste titre, Lanza cela ne fonctionne que sous Mozilla/Firefox. De plus les test que j'ai pu effectuer n'ont pas réellement été concluant... j'n'ai surement pas assez priez à l'étape 7 .

Bref pour mon problème je me suis résinier à faire une iframe... en attendant mieux .
Merci pour votre aide et vos explications!

Hello,

Je suis tombé sur le sujet par hasard en cherchant via google comment manipuler un input file avec javascript (mon problème un peu différent, mais j'y reviendrais...).

Si je vous répond, bien que tout nouveau sur ce forum (fort intéressant d'ailleurs ), c'est que j'ai cherché en vain à faire la même chose (poster un fichier via xmlhttprequest).
La solution que j'ai adopté pour gérer les erreurs est la suivante :
- je poste le formulaire vers un iframe (j'ai pas trouvé mieux non plus, désolé)
- je fais tourner une fonction avec un timeout pour vérifier si le titre de l'iframe à changer (j'ai aussi chercher en vain à récupérer la source d'un iframe... si quelqu'un à une solution je suis preneur , mais je crois que la sécurité n'est encore une fois pas d'accord)
- si le titre a changé, je lance alors une deuxième fonction, qui elle, via xmlhttprequest, interroge le serveur pour savoir si tout s'est bien passé.

Bon, c'est de la bidouille, et c'est assez contraignant, entre le coup des titres de page et la nécessité de logguer quelque part sur le serveur les erreurs liés à l'upload, mais çà marche

Sinon, concernant mon problème, il est peut être tout simple... une fois mon fichier posté, je voulais remettre à zéro mon champs input file (retirer le nom du fichier qui vient d'être uploadé). Et un document.nomDuForm.nomDuChamps.value=""; ne fonctionne pas plus qu'un document.getElementById("idDuChamps").value=""...
Je cherche, mais çà ne devrait pas être trop insoluble (j'espère)...

@bientôt

Lanza a écrit :
Just : c'est toi qui ne comprend pas, et personne ne cherche à te ridiculiser.

Le POST de formulaire avec ou sans <input type="file"> est géré par le navigateur. Tu ne peux pas poster automatiquement un formulaire via XMLHttpRequest.

Tu dois lire les variables unes à une dans tes champs et créer toi même la requête HTTP POST. Pour poster un fichier, la requête POST doit contenir le CONTENU de ce fichier. Or, tu n'y as pas accès.

Lanza : je pense que c'est toi qui n'a pas compris.

- "la requête POST doit contenir le CONTENU de ce fichier ?
=> Evidemment, c'est justement cela qu'on cherche.

- "Or, tu n'y as pas accès" ?
=> Je n'ai pas accès aux fichiers en local (heureusement) mais je peux aller chercher des fichiers ailleurs sur internet, ou bien je peux les construire moi-même.

J'ai une page (appelons la "page.html") avec un script qui va lire un fichier sur le site www.truc.fr, et qui va le poster vers le script www.bidule.fr/traiteFichier.php.

Ou bien, pour simplifier : ma page page.html porte un script qui calcule les 1000 premiers nombres premiers, et qui les poste sous forme de fichier vers le script www.bidule.fr/traiteFichier.php.

Je suppose que tu ne vois pas l'intérêt de cette manip, et je suppose que Just le voit.

Je suis moi aussi intéressé par cette question : est-il possible d'émuler un envoi de fichier par http sous javascript ? Et plus généralement : quelles sont les limites de javascript à la manipulation du protocole http ?

Archeboc.

PS : attention, sur les navigateurs sécurisés, dans le cas où mon script va lire un fichier sur le site www.truc.fr, le script DOIT provenir du site www.truc.fr, SAUF s'il est stocké en local.
Cela peut paraître idiot de vouloir créer un client lourd en HTML/javascript, mais la méthode xmlHTTPrequest rend l'opération désormais possible. Jusqu'où ? C'est l'objet de ma question.
Modifié par archeboc (07 Apr 2006 - 07:23)

Pour lire un fichier : la methode "open".

exemple :
mon_objet_xmlhttprequest.open( "POST", "mon_fichier.xml", true);

Bonjour,

C'est mon premier post aussi sur ce forum, même si je consulte les pages et tutoriaux depuis un bon moment sur cet excellent site !

@ Just> J'ai vu un site qui permettait l'envoi "automatique" d'une image via un champ INPUT TYPE="FILE", il s'agit de Ringo (http://www.ringo.com/photos/upload.html)
A plancher...

// Edit
Voici le script qu'ils utilisent... photo_upload.js
Il faut bien entendu utiliser aussi le fichier prototype.js (bien connu dans le monde AJAX)
C'est ce sur quoi je pars pour faire une action analogue à la tienne, tout est brut.

  <script type="text/javascript" src="http://www.ringo.com/20060629175729/script/prototype.js"></script>

  <script type="text/javascript" src="http://www.ringo.com/20060629175729/script/photoUpload.js"></script>
<body class="" id="photoUploadView" onload="photoUploadEnableInputsOnload()">


<li class="photoItem" id="photoItem_1" >
  <form method="POST" enctype="multipart/form-data"
        action="/photos/upload/frame.html" target="photoFrame_1">
    
    <input type="hidden" name="albumId" value=""/> 
    <input type="hidden" name="public" id="public_1" 
       value="true"/> 
    
    <img id="photoThumb_1" class="photo tiny" style="display:none;"/>
    <iframe id="photoFrame_1" name="photoFrame_1" src="" 
            class="hidden"></iframe>
    <input type="file" id="photo_1" name="photo"
           
           onchange="handleEvent(event, photoUploadHandleFile);"/> 
  </form>
  <p id="photoStatus_uploading_1" class="photoStatus" 
     style="display:none;">
    <span id="photoStatus_uploading_1_icon">
      
    </span>
    &nbsp;
    <span style="vertical-align:top;">
      En chargement. Tu peux continuer à choisir des photos.
    </span>
  </p>
  <p id="photoStatus_finished_1" class="photoStatus" 
     style="display:none;">
    <span id="photoStatus_finished_1_icon">
      
    </span>
    &nbsp;
    Terminé
  </p>
  <p id="photoStatus_unknown_1" class="photoStatus error" 
     style="display:none;">
    Il y a eu une erreur dans le téléchargement de cette photo. S'il te plaît, essaie encore une fois. 
  </p>
  <p id="photoStatus_tooLarge_1" class="photoStatus error" 
     style="display:none;">
    Cette photo est trop grande. Chaque photo peut faire jusqu'à 4 MB.
  </p>
  <p id="photoStatus_invalid_1" class="photoStatus error" 
     style="display:none;">
    Nous n'avons pas pu ouvrir ce fichier. Es-tu sûr que c'est une photo que l'on peut afficher ?
  </p>
  <p id="photoStatus_duplicate_1" class="photoStatus error" 
     style="display:none;">
    Il semble que tu aies déjà reçu celle-ci.
  </p>
  <p id="photoStatus_photoLimitExceeded_1" class="photoStatus error" 
     style="display:none;">
    Tu es une machine de téléchargement. Tu as excédé notre limite de 2.000 photos pour 30 jours. S'il te plaît, fais une petite pause, surfe quelques balises et reviens bientôt pour en télécharger plus.
  </p>
</li>

// Edit -- 14h45
J'abandonne ce chemin pour en utiliser un autre, beaucoup plus efficace.
J'ai un formulaire (contenant mon INPUT FILE) qui envoie dans un iframe câché, qui lui, en fin de traitement, recall mon Ajax... Comme çà, ma page n'est pas entièrement rechargée, et mon image uploadée est bien affichée.

Modifié par Mc2 (04 Jul 2006 - 14:57)