Extjs : Ajouter un champ upload d'image dans un formpanel [Résolu]

cs_ptidav 11 Messages postés dimanche 6 avril 2003Date d'inscription 26 janvier 2009 Dernière intervention - 28 déc. 2008 à 16:39 - Dernière réponse : cs_ptidav 11 Messages postés dimanche 6 avril 2003Date d'inscription 26 janvier 2009 Dernière intervention
- 26 janv. 2009 à 17:06
Bonjour,


J'aimerais envoyer à la fois des champs textes et une image par le même formulaire,
ceci avec un formpanel dans la librairie ExtJs. Les champs textes sont bien envoyés mais je
ne reçois pas l'image.


"imDl" est un objet,  l'image venant du  Ext.form.FileUploadField.

"this.envoie" est une fenetre qui apparait, affiche un mesage et envoie un formulaire Ext.FormPanel (form) vers le serveur par post, sur la page "recepteur.php".
Ca marche sauf pour mon image"imDl" qui n'est pas reçu par "recepteur.php", je devrais (j'imagine) recevoir mon image par $_FILES['param5'] sur ma page php vu que l'id du champ contenant l'image est param5.

Bref, en résumé ma question est comment envoyer imDl dans form et le recevoir correctement, quelqu'un peut il m'aider la-dessus.

Merci d'avance.


(Ci dessous, quelques extrait de code pour illustrer, c'est du php qui genere le JS donc j'ai des  \'  à la place de  ')


function uploadAjouter(){

this.affiche = new Ext.form.FileUploadField({

buttonOnly: true

});


imDl = this.affiche;

}


var form = new Ext.FormPanel({

standardSubmit: true,

frame:true,

defaultType: \'textfield\',

fileUpload: true,

isUpload: true,

method:\'POST\',

enctype:\'multipart/form-data\',

items: [

{

xtype: "label",

text: msg

}

,

{

xtype: "hidden",

name: "type",

id: "type",

value: type

},

{

xtype: "hidden",

name: "param1",

id: "param1",

value: param1

},

{

xtype: "hidden",

name: "param5",

id: "param5",

defaultType: \'textfield\',

fileUpload:true,

isUpload: true,

method:\'POST\',

enctype:\'multipart/form-data\',

items: imDl

}

]

});


this.envoie = new Ext.Window({

closable:false,

layout:"form",

items: form

});


this.envoie.show();

form.getForm().getEl().dom.action = "recepteur.php";

form.getForm().getEl().dom.method = "POST";

form.getForm().submit();
Afficher la suite 

Votre réponse

2 réponses

Meilleure réponse
cs_ptidav 11 Messages postés dimanche 6 avril 2003Date d'inscription 26 janvier 2009 Dernière intervention - 26 janv. 2009 à 17:06
3
Merci
Je reviens sur mon dernier post qui n'est pas forcement clair et pas forcement bon, j'ai refait une fonction plus claire (mélange texte et image)  qui s'intègre facilement à un autre formulaire avec par exemple :

                                                      {
                                                        xtype: \'button\',
                                                        text: "Changer l\'image associée",
                                                        handler: function(){
                                                        new uploadIm();
                                                            }   
                                                        }

et la fonction suivante qui utilise "fileuploadfield", donnée sur le site de ExtJs :

function uploadIm(){
 var uploadI = new Ext.FormPanel({
        fileUpload: true,
        frame: true,
        autoHeight: true,
        layout:\'fit\',
        defaults: {
            anchor: \'95%\',
            allowBlank: false,
            msgTarget: \'side\'
        },
        items: [{
            xtype: \'hidden\',
            name:\'type\',
            value: \'image\'
        },{
            xtype: \'fileuploadfield\',
            id: \'form-file\',
            emptyText: \'Choix du fichier\',
            fieldLabel: \'userfile\',
            name:\'userfile\',
        }],
        buttons: [{
            text: \'Save\',
            handler: function(){
                if(uploadI.getForm().isValid()){
                    uploadI.getForm().submit({
                        url: \'reporter.php\',
                        method:\'POST\',
                        enctype:\'multipart/form-data\',
                        waitTitle:\'Connexion au serveur ...\',
                        waitMsg: \'Upload en cours ...\',
                        success: function(form, action){
                        fenetreU.close();
                        Ext.example.msg(\'Image uploadée.\', "OK ..."); // ou Ext.Msg.alert ...
                           }
                        ,
                        failure:function(form, action){
                        fenetreU.close();
                        Ext.Msg.alert(\'Image non uploadée.\', "erreur ...");
                         }
                    });
                }
            }
        }
     ]
    });
   
    var fenetreU = new Ext.Window({
        closeAction: \'hide\',
        title: \'Upload\',
        items: [uploadI]
    });
   
    fenetreU.show();
};

Merci cs_ptidav 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 70 internautes ce mois-ci

Commenter la réponse de cs_ptidav
cs_ptidav 11 Messages postés dimanche 6 avril 2003Date d'inscription 26 janvier 2009 Dernière intervention - 21 janv. 2009 à 21:13
0
Merci
Bonjour,

vu qu'il n'y a pas de réponse, je vais me répondre à moi-même...

J'ai finalement choisi de séparer le traitement de l'upload de l'image et de l'envoi du formulaire mais
il est possible d'envoyer les deux en même temps (je pense j'ai pas essayé), pour cela il faut
s'inspirer de ma fonction "uploadIm" qui est tirée du site de ExtJs.

Voici ce que j'ai choisi de faire :

function winFiche(...){                                           //mon premier formulaire
var f = new uploadAjouter().affiche;
this.aj= new Ext.Window({...
...      {
         xtype: \'label\',
         text: \'Remplacer l\'+"\'"+\'image (<500 Ko): \'
          }
           ,
            f
            ,
           {
          xtype: \'button\',
          text: \'File\',
          handler: function(){
          var v = f.getValue();
             if (v !=\'\')
            {
                new uploadIm(f);
            }
          }   
        }       
          , ...

Ma variable f vient de "var f = new uploadAjouter().affiche;"

function uploadAjouter(){
this.affiche = new Ext.form.FileUploadField({  
    buttonOnly: true
});
};

quand le bouton 'File' est cliqué sur le premier formulaire, on lance la fonction  "uploadIm" avec f en parametre.

function uploadIm(monImage){
 var uploadI = new Ext.FormPanel({     // deuxieme formulaire pour l'image
        fileUpload: true,
        frame: true,
        autoHeight: true,
        defaults: {
            anchor: \'95%\',
            allowBlank: false,
            msgTarget: \'side\'
        },
        items:[
            {
                xtype: \'hidden\',
                name:\'type\',
                value: \'image\'
            },
            monImage
            ]
    });
   
    var fenetreU = new Ext.Window({
        closeAction: \'hide\',
        items: [uploadI]
    });
    fenetreU.show();
   
        uploadI.getForm().submit({
             url:\'reporter.php\',
            method:\'POST\',
            waitTitle:\'Connexion au serveur ...\',
            waitMsg:\'Upload en cours ...\',

            success:function(){
                fenetreU.close();
            }
             });
 };

Cette fonction ouvre une fenetre d'attente (avec barre de progression ), envoie le fichier par post à reporter.php dans un deuxieme formulaire et ferme sa fenetre. L'image est uploadée et je l'utilise si le premier formulaire est validé.

Le submit ( uploadI.getForm().submit) ne marche qu'avec une fenetre (Ext.Window fenetreU) ou sinon avec un renderTo.

Je ne sais pas si c est tres clair ou si c'est une bonne solution mais ca doit pouvoir en éclairer certains.

++
Commenter la réponse de cs_ptidav

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.