7
votes

Téléchargement de fichier dans EXTJS 4.2 sans formulaire ()

J'essaie de télécharger un fichier (dès présent de toute extension) dans ExtJS. J'ai un modèle et un magasin. Le téléchargement de fichier se produit depuis une fenêtre et je n'ai pas de formulaire dans la fenêtre. Tous les exemples que j'ai essayés dans le net sont avec form2 (). J'utilise plutôt et l'appel Ajax comme ci-dessous pour envoyer les données au serveur. xxx pré>

Les enregistrements à envoyer dans les données sont obtenus comme ci-dessous. p> xxx pré>

Tout en réglant l'enregistrement dans le modèle, j'utilise ci-dessous Code .. p> xxx pré>

J'ai reçu une erreur de statut 500 avec la réponse "impossible de convertir la valeur de type [java.lang.string] vers le type requis [org.springframework .Web.MultiPART.COMMONS.MONSMULTIPARTFILE] " CODE> P>

Je suis sûr que cela est dû à la manière dont j'ai défini la valeur sur le modèle comme ext.getcmp (" Fileduploadcall " ) .Value code> donne le nom du fichier. S'il vous plaît laissez-moi savoir comment définir le fichier sur le modèle et quel type de données dois-je spécifier pour le champ dans le modèle. P>

ci-dessous est comment j'essaie de récupérer le fichier dans le contrôleur de ressort. P>

@RequestMapping (value = "/qaf/saveSetupDetails.action")
    public @ResponseBody
    void saveSetupDetails(@RequestParam CommonsMultipartFile data)throws Exception{
        log.info("Enter into saveSetupDetails method..." + data.getOriginalFilename());
    }

extjs4.2

0 commentaires

4 Réponses :

0
votes

Vous ne pouvez pas le faire avec Filefield de ExtJs

Filefield de EXTJS Retour String URL à partir de SELECT Fichier. P>

Je pense que vous avez besoin du fichier sélectionné comme se produit dans le changement de changement mais FileField n'a pas Cet événement p>

Vous pouvez utiliser cette solution, Peut-être que vous obtenez une idée de la solution p>

exemple: http://jsfiddle.net/e3m3e / E8V7G / P>

var itemFile = null;
Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 400,
    html: "<input id='inputFile' type='file' name='uploaded'/>",
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function() {
            itemFile = document.getElementById("inputFile");            
            itemFile.addEventListener('change', EventChange, false);
        }
   }
});

function EventChange(e){    
    var files = itemFile.files;
    console.log(files);
}

0 commentaires

2
votes

Si vous souhaitez toujours utiliser Fileduploadfield CODE> et téléchargez-vous via un appel AJAX à l'aide de HTML5 FILEREADER CODE>, vous pouvez le faire comme telle:

launchUpload: function () {
    //get a handle of the "file" input in the widget itself...
    var fileInput = document.getElementById(yourUploadField.button.fileInputEl.id);
    var fileReader = New FileReader();
    var fileToUpload = fileInput.files[0]; //assuming your only uploading one file...
    var me = this

    fileReader.onload = function (e) {
         me.onLoadFile(e, me, fileToUpload.name);
    }

    fileReader.readAsDataURL(fileToUpload);

}, 
onLoadFile: function (e, scope, filename) {

     //I carry the scope around for functionality...

     Ext.Ajax.request({
        method: 'POST',
        url: 'url',
        scope: scope,
        jsonData: { fileNameParameter: filename, fileDatainBase64: e.target.result},
        success: function (response, operation) {
            //success..
        },
        failure: function (response, operation) {
            //failure...
        }
    });       

}

0 commentaires

0
votes

extjs version 6.0.1 - Utilisation de l'IFRAME

Ext.define('xxx.yyy.UploadData', {
    extend : 'Ext.form.Panel',
    alias  : 'widget.uploaddata',

    initComponent : function(){        
        var me = this;        

        me.items = [{
          xtype      : 'filefield',
          margin     : '20 0 0 20',
          name       : 'excelfile',
          fieldLabel : 'Choose file',
          msgTarget  : 'side',
          allowBlank : false,
          anchor     : '30%',
          buttonText : 'Select',
          defaultButtonTarget : 'fileframe'
        },{
          xtype : 'panel',
          html  : '<iframe width="340" height="340" style="display: none" name="fileframe"></iframe>'
        },{
          xtype : 'button',
          text  : 'Import',
          handler : function(){
            var form = this.up('form').getForm();
            if(form.isValid()){
                form.submit({
                    url     : './upload.php',
                    waitMsg : 'uploading...',
                    success : function(fp, o) {
                        alert("OK");                            
                    }
                });
            }
        }
    }];

    me.callParent();        
    }    
   });

0 commentaires

1
votes

Oui, vous pouvez utiliser AJAX et FormData API:

var file = s.fileInputEl.dom.files[0],
     data = new FormData();
data.append('file', file);
Ext.Ajax.request({
   url: '/upload/files',
   rawData: data,
   headers: {'Content-Type':null}, //to use content type of FormData
   success: function(response){
   }
});

0 commentaires