extjs - examples - carga de archivos usando EXT JS

extjs gpl

Question

Pasos para crear el campo Cargar archivo usando Ext Js

Answer 1

En lo que respecta a los pasos específicos, utilizando la funcionalidad admitida en ExtJS 3x, lo mejor es utilizar este módulo / complemento:

http://dev.sencha.com/deploy/dev/examples/form/file-upload.html

El script central viene con el paquete Ext JS, en su archivo HTML principal (donde se ha vinculado a los scripts Ext básicos), en la sección principal después de poner sus otros scripts:

<script type="text/javascript" src="nameofyourextfolder/examples/ux/fileuploadfield/FileUploadField.js"></script>

Lamentablemente, no existe una gran cantidad de documentación sobre este elemento de Ext JS; sin embargo, para la funcionalidad básica, puede crear un formulario con un campo de carga asíncrona utilizando la siguiente información:

            myuploadform= new Ext.FormPanel({
                fileUpload: true,
                width: 500,
                autoHeight: true,
                bodyStyle: ''padding: 10px 10px 10px 10px;'',
                labelWidth: 50,
                defaults: {
                    anchor: ''95%'',
                    allowBlank: false,
                    msgTarget: ''side''
                },
                items:[
                {
                    xtype: ''fileuploadfield'',
                    id: ''filedata'',
                    emptyText: ''Select a document to upload...'',
                    fieldLabel: ''File'',
                    buttonText: ''Browse''
                }],
                buttons: [{
                    text: ''Upload'',
                    handler: function(){
                        if(myuploadform.getForm().isValid()){
                            form_action=1;
                            myuploadform.getForm().submit({
                                url: ''handleupload.php'',
                                waitMsg: ''Uploading file...'',
                                success: function(form,action){
                                    msg(''Success'', ''Processed file on the server'');
                                }
                            });
                        }
                    }
                }]
            })

Lo que este código hará es crear un nuevo panel de formularios con un campo de carga y un botón de carga. Al hacer clic en el botón de carga, el archivo seleccionado se enviará a la secuencia de comandos del servidor handleupload.php (o como se llame). Es entonces este script el que maneja lo que quiere hacer con el archivo. Un ejemplo de esto podría ser potencialmente:

    $fileName = $_FILES[''filedata''][''name''];
    $tmpName  = $_FILES[''filedata''][''tmp_name''];
    $fileSize = $_FILES[''filedata''][''size''];
    $fileType = $_FILES[''filedata''][''type''];
    $fp      = fopen($tmpName, ''r'');
    $content = fread($fp, filesize($tmpName));
    $content = addslashes($content);
    fclose($fp);
    if(!get_magic_quotes_gpc()){
        $fileName = addslashes($fileName);
    }
    $query = "INSERT INTO yourdatabasetable (`name`, `size`, `type`, `file`) VALUES (''".$fileName."'',''".$fileSize."'', ''".$fileType."'', ''".$content."'')";
    mysql_query($query); 

Que inyectaría el archivo en una base de datos SQL. Lo que hay que recordar es que el archivo del lado del servidor maneja una carga como lo haría un formulario HTML normal ...

¡Espero que esto ayude!

Answer 2

Si mira los ejemplos disponibles en www.ExtJS.com, encontrará este .

Aunque se basa en la carga de archivos HTML estándar, al igual que sugiere esta respuesta .

Answer 3

la configuración de la ID solo dará como resultado que el nombre de la matriz $ _FILES sea el mismo que el ID. Si necesita usar algo más, configure la opción de configuración de nombre y lo usará en su lugar.

Answer 4

items: {
    xtype: ''form'',
    border: false,
    bodyStyle: {
        padding: ''10px''
    },
    items: {
        xtype: ''multifilefield'',
        labelWidth: 80,
        fieldLabel: ''Choose file(s)'',
        anchor: ''100%'',
        allowBlank: false,
        margin: 0
    }
},

Demostración en vivo para ExtJS 4.2.2 está here