web-dev-qa-db-fra.com

téléchargement de fichiers avec EXT JS

Étapes pour créer un champ de téléchargement de fichier à l'aide d'Ext Js

extjs
28
brindha

En ce qui concerne les étapes spécifiques, en utilisant les fonctionnalités prises en charge dans ExtJS 3x, le mieux est d'utiliser ce module/plugin:

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

Le script principal est livré avec le package Ext JS, dans votre fichier HTML principal (où vous avez lié aux scripts Ext principaux), dans la section head après la mise en place de vos autres scripts:

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

Malheureusement, il n'y a pas une énorme quantité de documentation sur cet élément d'Ext JS - cependant pour les fonctionnalités de base, vous pouvez créer un formulaire avec un champ de téléchargement asynchrone en utilisant ce qui suit:

            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');
                                }
                            });
                        }
                    }
                }]
            })

Ce que ce code fera est de créer un nouveau panneau de formulaire avec un champ de téléchargement et un bouton de téléchargement. Lorsque vous cliquez sur le bouton de téléchargement, le fichier sélectionné sera envoyé au script côté serveur handleupload.php (ou comme vous l'appelez). C'est alors ce script qui gère ce que vous voulez faire avec le fichier. Un exemple de ceci pourrait potentiellement être:

    $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);

Ce qui injecterait le fichier dans une base de données SQL. La chose à retenir est que le fichier côté serveur gère un téléchargement comme le ferait un formulaire HTML normal ...

J'espère que cela t'aides!

27
SW4

Si vous regardez les exemples disponibles sur www.ExtJS.com, vous trouverez celui-ci .

Bien qu'il soit basé sur le téléchargement de fichiers HTML standard - tout comme cette réponse suggère.

7
Chau

si vous définissez uniquement l'ID, le nom du tableau $ _FILES sera identique à l'ID. Si vous devez utiliser autre chose, définissez l'option de configuration du nom et il l'utilisera à la place.

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

La démo en direct pour ExtJS 4.2.2 est ici

0
khmurach