téléchargement de fichiers avec EXT JS

Question

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

Answer 1

Autant que des mesures spécifiques sont concernés, à l'aide de la fonctionnalité de prise en charge dans ExtJS 3x, votre meilleur le meilleur est d'utiliser ce module/plugin:

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

Le script de base est livré avec l'Ext JS paquet, dans votre fichier HTML principal (où vous avez lié à la base Ext scripts), dans la section d'en-tête après vos autres scripts de vente:

<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 de Ext JS - toutefois, pour les fonctionnalités de base, vous pouvez créer un formulaire avec un async champ de téléchargement à l'aide de la ci-dessous:

            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 va faire est de créer un nouveau formpanel avec un champ de téléchargement et un bouton de téléchargement. Lorsque vous cliquez sur le bouton télécharger le fichier sélectionné sera envoyé à l'serverside script handleupload.php (ou ce que vous appelez). C'est ensuite ce script qui gère ce que vous voulez faire avec le fichier. Un exemple de cela pourrait ê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 permettrait d'injecter le fichier dans un SQL DB. La chose à retenir est le côté serveur de descripteurs de fichiers (upload tout aussi normal d'un formulaire HTML serait...

Espérons que cette aide!

Answer 2

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 - comme le suggère cette réponse .

Answer 3

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.

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
    }
},
 

Démo en direct pour ExtJS 4.2.2 est ici