Accueil > Forum > > > > Extjs : Ajouter un champ upload d'image dans un formpanel
Extjs : Ajouter un champ upload d'image dans un formpanel
dimanche 28 décembre 2008 à 16:39:02 |
Extjs : Ajouter un champ upload d'image dans un formpanel

ptidav
|
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();
|
|
mercredi 21 janvier 2009 à 21:13:25 |
Re : Extjs : Ajouter un champ upload d'image dans un formpanel

ptidav
|
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.
++
|
|
lundi 26 janvier 2009 à 17:06:02 |
Re : Extjs : Ajouter un champ upload d'image dans un formpanel

ptidav
|
Réponse acceptée !
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(); };
|
|
Cette discussion est classée dans : form, image, true, formpanel, imdl
Répondre à ce message
Sujets en rapport avec ce message
show/hide formulaire avec checkbox [ par rachidphp93 ]
bonjour tout le monde;j'ai un formulaire principale dont des zone sont specifique à un type de user, je souhaite qu'oon cochant un checkb
Bouton radio et bloquer la saisie [ par stamdan ]
Bonjour à tous et à toutes,voilà je dois développer une page html pour mon taf. Cette page est découpée en trois partie,ces trois parties déterminent
application marche avec IE et ne marche pas avec firefox [ par noussadk84 ]
svp help me c tres tres urgent mon application marche avec IE et non pas avec firefox pourquoi? ben jai developpe une petite application en html q
checkbox !! [ par Arkane ]
bjr !! je suis pas tres avancé en javascript !!j'aimerasi qu'on me disent comment faire pour mettre disable un tableau de checkboxj'ai des checkbox 'm
répetition image en bas de page [ par youpiyoyo ]
j'ai une image de 'width="8" height="26" 'j'aimerai la repeter pour k'elle puisse faire tout le bas de la page possibe..?? en javascript ou c du CSSme
Deplacement d'une image [ par missceline33 ]
Bonjour, j'ai un petit problème. J'ai un tableau contenant une image et je souhaite pouvoir déplacer cette image de manière assez fluide (cet outil e
Problème sous IE avec document.activeElement [ par ronflex38 ]
Salut, J'utilise dans une page la fonction document.activeElement qui, je viens de le découvrir, ne marche pas avec Mozilla. Mais je me suis aussi ap
calcul affiché en temps reel sur la page [ par laubro ]
Bonjour,une question, j'ai un form avec une date de debut et une date de fin, ensuite quand j'envoi le form j'ai le calcul du nbr de jours entre les d
besoin d'aide .. débutante [ par malkie ]
Bonjour,voilà mon problème : je veux faire un pop up qui en cliquant sur une vignette ouvre une fenetre avec la même image en grand. Tout va bien pou
scroll d'images [ par ctx_man ]
Bonjour, Je cherche un moyen de faire un scrolling d'image presque identique à un simple "". En faisant un code comme suit il faut attendre que l'imag
Livres en rapport
|
Derniers Blogs
SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko
Logiciels
Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|