archivo de carga utilizando Ext JS

Question

Pasos para crear un campo archivo de carga utilizando Ext JS

Answer 1

Si nos fijamos en los ejemplos disponibles en www.ExtJS.com, encontrará this one.

Aunque está basado en la carga de archivos HTML estándar, al igual que this answer sugiere.

Answer 2

Por lo pasos específicos se refiere, utilizando la funcionalidad soportada en ExtJS 3x, su mejor mejor es utilizar este módulo/plugin:

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

El guión básico viene con el paquete de Ext JS, en su archivo HTML principal (donde se ha vinculado a los guiones núcleo Ext), en la sección de la cabeza después de que sus otros scripts puso:

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

Lamentablemente, no hay una enorme cantidad de documentación sobre este elemento de Ext JS-sin embargo para básico funcionalidad, puede crear un formulario con un campo de carga asincrónica mediante el siguiente:

  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 va a hacer es crear un nuevo FormPanel con un campo de subida y un botón de subida. 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 al igual que un formulario HTML normal ...

Espero que esto ayude!

Answer 3

establecer la identificación 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 directo de ExtJS 4.2.2 es here