如何从 ext js 的文件字段中获取文件？答案

【问题标题】：how do i get file from filefield in ext js?如何从 ext js 的文件字段中获取文件？
【发布时间】：2019-12-11 17:25:14
【问题描述】：

我在 ext js 中有表单面板。使用xtype: filefield 的内部表单面板

如何获取上传的文件。

如果我使用表单将获得getForm() 方法来获取该文件。现在，表单在 ext js 中不可用。我用来获取这样的值

var values = form.getValues();
if(form.validate())
{
   var name = values.name;
   var desc = values.desc;
}

我需要获取并存储到数据库的文件字段文件。在此文件字段中上传一个 mp3 文件。任何人都可以提出解决方案。

【问题讨论】：

标签： javascript php extjs sencha-touch

【解决方案1】：

您可以使用FileReader 对象来读取文件。下面是执行此操作的示例代码。

Ext.application({
    name : 'Fiddle',

    launch : function() {

        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            fullscreen: true,
            items: [{
                xtype: 'fieldset',
                title: 'My Uploader',
                items: [
                    {
                        xtype: 'filefield',
                        label: "MyPhoto:",
                        name: 'photo'
                    }, {
                        xtype: 'button',
                        text: 'Get File',
                        handler: function(){
                            let file = this.up().down('filefield').el.down('input[type=file]').dom.files[0];
                            var reader = new FileReader();

                            reader.onload = (function(theFile) {
                                return function(e) {
                                    let result = e.target.result;
                                    //process upload with result
                                    alert(result);
                                };
                            })(file);

                            reader.readAsBinaryString(file);
                        }
                    }
                ]
            }]
        });
    }
});

你可以找到工作小提琴here

您也可以使用form.submit() 方法提交表单。

var form = this.up('form').getForm();
if(form.isValid()) {
    form.submit({
      url: 'photo-upload.php',
      waitMsg: 'Uploading your photo...',
      success: function(fp, o) {
          Ext.Msg.alert('Success', 'Your photo "' + o.result.file +
                                             '" has been uploaded.');
      }
  });
}

你可以找到这个例子here

【讨论】：

【解决方案2】：

看看fileInputEl 您可以在文件字段上注册更改侦听器并从那里获取文件，例如

listeners: {
    change: function(field, fileName) {
        var fileList = field.fileInputEl.dom.files;
        for (var i = 0; i < fileList.length; i++) {
          var file = fileList[i];
          //do what ever you want with file
        }
    }
}

【讨论】：