[AJAX] balise <input type='file'> et paramètre

**Luke spywoker** · 16/09/2011, 08h38

Bonjour,
J'ai passer la moitié de la nuit a essayer de coder un affichage d'image dès le choix du fichier mais il s'avère que la propriété value de la balise <input type='file'> est recu par mon programme traitant l'image comme un string et non comme un fichier (ou chemin de fichier).
Je code coté serveur en python avec le Framework cherrypy et je me suis fortement inspiré de ce code: http://docs.cherrypy.org/stable/prog...uploading.html
Et il semblerai que le problème est de transmettre le paramètre: le fichier image en mode POST ce qui ne marche pas comme ça:

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
 
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='utf-8'>
<script> 
function updateImage() {
  if (window.XMLHttpRequest) {
    var conn=XMLHttpRequest();
    conn.open("POST", "http//lurl/vers/mon/fichier/de /traitement", false); // ou en GET conn.open("GET", "http//lurl/vers/mon/fichier/de/traitement"+"?file_name="+document.forms['formulaire'].elements['image'].value, false)   
    conn.send("file_name="+document.forms['formulaire'].elements['image'].value);// Avec GET: conn.send(null)
    if (conn.readyState == 4) {
      document.images['img'].src=conn.responseText;
      }
   }
}
 
</script>
</head>
<body>
<img name='img' src=''>
<form name='formulaire' method='POST' enctype='multipart/form-data'>
<input type='file' name='image' onchange="updateImage()">
</form>
</body>
</html>

Resultat avec la methode GET l'argument recu par mon script de traitement est de type string ce qui ne convient pas au traitement (téléchargement et retaillage):il faudrait que sa soit l'objet image afin que je puisse le traiter.
Avec la méthode POST l'argument n'est pas transmis a mon scripte ce qui provoque une érreur j'aurai une érreur de code avec la méthode POST ?
Coté serveur: l'image serai retailler et déplacer pour finir comme valeur de l'attribut src de la balise <img> comme vous l'avez déja compris.
Si quequ'un pourrait m'aider sa serai sympa.
merci

**F0ul** · 20/09/2011, 00h37

Il faut d'abord que tu obtiennes ton image.
En lisant la valeur de ton "input", tu ne lis que le chemin vers l'image. Il faut d'abord que tu crées une copie de l'image pour pouvoir la transmettre au traitement... ou bien la copier sur ton serveur et appeler ton traitement.

**Luke spywoker** · 20/09/2011, 10h17

C'est le problème car comme mentionner dans le lien vers le code du framework que j'utilise il suffit de d'écrire le paramètre sur la disque pour avoir le fichier image ce qu'est censer faire la requète XMLHttpRequest() (c'est ce que est censer faire "http//lurl/vers/mon/fichier/de /traitement") et comme javascript ne permet pas d'écrire sur le disque avant cette requète je suis bloquer car je n'ai que le nom de l'image de type string a transmettre comme paramètre. Le Framework est basé sur un module cgi qui permet d'avoir l'objet image comme paramètre.
Je pense que ce que j'essaie de faire n'est pas possible avec les moyens que j'ai tout simplement.

**F0ul** · 21/09/2011, 18h17

Il suffit de passer par un script qui fera l'intermédiaire ...
Formulaire --> Création de l'image --> Traitement

**Luke spywoker** · 21/09/2011, 19h56

Comment ca un script, dans l'esprit d'Ajax qui est de ne pas changer de page pour un traitement synchrone ou asynchrone d'un élément, si je ne dispose pas de l'objet image comme paramètre je ne peut faire de création d'image. Ajax appel un fichier(ou script) afin de traiter la requète XMLHttpRequest et dans mon formulaire le fichier (ou script) appeler ne peut marcher car l'argument transmis n'est pas l'objet cgi image mais le nom du fichier a uploader et donc mon script ne marche pas.
A... je comprend tu pense qu'en créant un objet image javascript sa va passer, j'ai pas trop creuser par la mais j'ai eu cette idée aussi et sa n'a pas marcher du a mon manque d'expérience du javascript.
Pourrait tu developper ton idée, sa serai sympa:
Formulaire --> Création de l'image --> Traitement
(surtout création de l'image)
Merci pour ton idée.

**Bovino** · 26/09/2011, 11h08

Tu ne peux pas transférer d'images via AJAX.
La solution souvent utilisée est de passer par un iframe qui contient l'input file que tu pourras soumettre sans recharger l'ensemble de la page.

**Luke spywoker** · 27/09/2011, 20h01

C'est bien ce que je pensais c.a.d que ce que j'essayai de faire n'est pas possible.

[AJAX] balise <input type='file'> et paramètre

AJAX

Discussions similaires

Partager

Partager