Subir un archivo al servidor con Extjs
Hola amigos el dia de hoy tengo una gran duda, quisiera saber si es posible subir un archivo al servidor utilizando la libreria Extjs y mirar algunos ejemplos...
de antemano muchas gracias por su ayuda amigos....
subir como tal no, para eso necesitas hacerlo con un lenguaje del lado del servidor como php, jsp, etc... lo que si puedes hacer es colocar el formulariio con un
xtype: textfield, con un
inputType: 'file'y al formpanel colocarle
fileUpload: true... con eso puedes recibir del lado servidor el archivo que escogiste en el formulario y guradarlo donde quieras.
ahhhhhhhhhhhhhhhhhh gracias graciassssss amigoooo...... muchas gracias... una ves del ladoo del servidor ya es facil subir el archivo..
Amigo he probado al subir el archivo pero lastimosamente no lo hace efectivo.... aqui dejo mi codigo para que me ayuden porque cuando envio el formulario no esta recibiendo el archivo del lado del servidor.... de antemano muchas gracias por su ayuda
function cargarclientes(){
this.form = new Ext.form.FormPanel({
url: 'cargar.php',
width:330,
bodyStyle:'margin-left:10px;',
border:false,
waitMsgTarget: true,
labelWidth: 50,
items:[
{xtype:'textfield',fieldLabel:'Archivo', inputType: 'file', fileUpload: true, name:'archivo', width:200, allowBlank:false}
]
});
this.cargar= function()
{
this.form.getForm().submit(
{
waitMsg:'Cargando...',
success: function(f,a)
{
Ext.Msg.show({
title: 'Cargando', //<- el título del diálogo
msg: 'Archivo Cargado Correctamente !!', //<- El mensaje
buttons: Ext.Msg.OK, //<- Boton de Aceptar
icon: Ext.Msg.INFO // <- un ícono de Info
});
//this.form.getForm().reset();
wine.close();
},
failure: function(f,a)
{
Ext.Msg.show({
title: 'Error', //<- el título del diálogo
msg: a.result.errormsg, //<- El mensaje
buttons: Ext.Msg.OK, //<- Boton de Aceptar
icon: Ext.Msg.ERROR // <- un ícono de Info
});
}
}
);//submit
}//cargar
var winc;
if(!winc){
winc = new Ext.Window({
title: '.: Cargar Clientes :.',
bodyStyle: 'padding:10px;background-color:#fff;',
width:315,
height:150,
modal:true,
buttons: [{text:'Cargar',handler:this.cargar,scope:this}],
items:[this.form]
});
}
winc.show(this);
}
esta parte del código :
fileUpload: truedebes dejarla en el formulario no en el textfield... trata con eso y nos avisas
Nooo amigooo ya lo puse el fileUpload en el form y tampoco funciona aqui dejo mi codigo....
muchas gracias por su ayuda...
function cargarclientes(){ this.form = new Ext.form.FormPanel({ url: 'cargar.php', width:330, bodyStyle:'margin-left:10px;', border:false, waitMsgTarget: true, labelWidth: 50, fileUpload: true, items:[ {xtype:'textfield', fieldLabel:'Archivo', inputType:'file', name:'archivo', emptyText: 'Debe seleccionar un archivo', width:200} ] }); this.cargar= function() { this.form.getForm().submit( { waitMsg:'Cargando...', success: function(f,a) { Ext.Msg.show({ title: 'Cargando', //<- el título del diálogo msg: 'Archivo Cargado Correctamente !!', //<- El mensaje buttons: Ext.Msg.OK, //<- Boton de Aceptar icon: Ext.Msg.INFO // <- un ícono de Info }); winc.close(); }, failure: function(f,a) { Ext.Msg.show({ title: 'Error', //<- el título del diálogo msg: a.result.errormsg, //<- El mensaje buttons: Ext.Msg.OK, //<- Boton de Aceptar icon: Ext.Msg.ERROR // <- un ícono de Info }); } } );//submit }//cargar var winc; if(!winc){ winc = new Ext.Window({ title: '.: Cargar Clientes :.', bodyStyle: 'padding:10px;background-color:#fff;', width:315, height:150, x:50, y:50, modal:true, buttons: [{text:'Cargar',handler:this.cargar,scope:this}], items:[this.form] }); } winc.show(this); }
Amigos les pido su ayuda ya que necesito cargar un archivo con urgencia y no he podido hacerlo en el anterior mensaje deje mi codigo...
De antemano muchas gracias...
utiliza este plugin:
/*! * Ext JS Library 3.0+ * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ Ext.ns('Ext.ux.form'); /** * @class Ext.ux.form.FileUploadField * @extends Ext.form.TextField * Creates a file upload field. * @xtype fileuploadfield */ Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, { /** * @cfg {String} buttonText The button text to display on the upload button (defaults to * 'Browse...'). Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text * value will be used instead if available. */ buttonText: 'Browse...', /** * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible * text field (defaults to false). If true, all inherited TextField members will still be available. */ buttonOnly: false, /** * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field * (defaults to 3). Note that this only applies if {@link #buttonOnly} = false. */ buttonOffset: 3, /** * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object. */ // private readOnly: true, /** * @hide * @method autoSize */ autoSize: Ext.emptyFn, // private initComponent: function(){ Ext.ux.form.FileUploadField.superclass.initComponent.call(this); this.addEvents( /** * @event fileselected * Fires when the underlying file input field's value has changed from the user * selecting a new file from the system file selection dialog. * @param {Ext.ux.form.FileUploadField} this * @param {String} value The file value returned by the underlying file input field */ 'fileselected' ); }, // private onRender : function(ct, position){ Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position); this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'}); this.el.addClass('x-form-file-text'); this.el.dom.removeAttribute('name'); this.fileInput = this.wrap.createChild({ id: this.getFileInputId(), name: this.name||this.getId(), cls: 'x-form-file', tag: 'input', type: 'file', size: 1 }); var btnCfg = Ext.applyIf(this.buttonCfg || {}, { text: this.buttonText }); this.button = new Ext.Button(Ext.apply(btnCfg, { renderTo: this.wrap, cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '') })); if(this.buttonOnly){ this.el.hide(); this.wrap.setWidth(this.button.getEl().getWidth()); } this.fileInput.on('change', function(){ var v = this.fileInput.dom.value; this.setValue(v); this.fireEvent('fileselected', this, v); }, this); }, // private getFileInputId: function(){ return this.id + '-file'; }, // private onResize : function(w, h){ Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h); this.wrap.setWidth(w); if(!this.buttonOnly){ var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset; this.el.setWidth(w); } }, // private onDestroy: function(){ Ext.ux.form.FileUploadField.superclass.onDestroy.call(this); Ext.destroy(this.fileInput, this.button, this.wrap); }, // private preFocus : Ext.emptyFn, // private getResizeEl : function(){ return this.wrap; }, // private getPositionEl : function(){ return this.wrap; }, // private alignErrorIcon : function(){ this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]); } }); Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField); // backwards compat Ext.form.FileUploadField = Ext.ux.form.FileUploadField;y lo usarias algo así:
{ xtype: 'fileuploadfield', id: 'form-file', emptyText: 'Select an image', fieldLabel: 'Photo', name: 'photo-path', buttonText: '', buttonCfg: { iconCls: 'upload-icon' } }aqui checa el ejemplo: <!-- m -->http://www.extjs.com/deploy/dev/example ... pload.html<!-- m --> Saludos y suerte
hola soy nueva en este foro y estoy aprendiendo a programar en extjs estoy n l mismo dilema no puedo subir un archivo al servidor quiero usar tu plugin pero en verdad no c en donde ubicarlo y como llamarlo por favor m prodrian ayudar de antemano muchas gracias...
necesitas importar el código del plugin a tu html y luego lo utilizas así:
{ xtype: 'fileuploadfield', id: 'form-file', emptyText: 'Select an image', fieldLabel: 'Photo', name: 'photo-path', buttonText: '', buttonCfg: { iconCls: 'upload-icon' } }saludos
@elcrespo, chingon... ahora ya puedo subir mi archivo <!-- s:D --><!-- s:D -->, felicidades, mañana subo mi solución, utilizando:
struts
json
extjs
jsp
saludos desde Puebla, México
Hola, realice lo que Crysfel indico en un formulario sencillo, pero me sale mal el boton para cargar el archivo. Adjunto la imagen en donde se ven los errores, si alguien sabe porque ocurre esto les agradezco la ayuda.
¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook
Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.