javascript - 我如何从 ext js 中的文件字段获取文件？

Question

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

的内部表单面板

如何获取上传的文件。

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

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

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

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

你可以找到工作 fiddle 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