javascript - 如何从 uploadfilefield 获取文件内容？

Question

我正在尝试使用 ExtJS4 从 uploadfilefield 获取文件内容，但不知道如何做？

我有 uploadfilefield 的代码:

{
    xtype: 'fileuploadfield',
    buttonText : 'Upload CSV',
    buttonConfig:
    {
        icon: 'images/upload.png',
        tooltip: 
        {
            text: 'some hints',
            width: 200
        }
    },
    buttonOnly: true,
    listeners: 
    {
        'change': function(fb, v)
        {
            // v returns the filename
            // HOW CAN I GET THE FILE CONTENT?
        }
    }
}    

我在想也许 fb 有内容，但是 alert(JSON.stringify(fb)) 给我一个关于 fb 是一个圆形对象的错误。

我猜测必须有其他方式/事件。另外我想在对话框中按下打开后立即获取文件内容。我不能使用提交按钮来做这个后记。

感谢我的 StackOverflowers 伙伴 ;)

附录:

我正在看这个EXAMPLE关于 Sencha :

Ext.create('Ext.form.Panel', {
    title: 'Upload a Photo',
    width: 400,
    bodyPadding: 10,
    frame: true,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        name: 'photo',
        fieldLabel: 'Photo',
        labelWidth: 50,
        msgTarget: 'side',
        allowBlank: false,
        anchor: '100%',
        buttonText: 'Select Photo...'
    }],

    buttons: [{
        text: 'Upload',
        handler: function() {
            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.');
                    }
                });
            }
        }
    }]
});

传递给“photo-upload.php”的是什么？这个 php 应该如何获取文件的内容？

Answer 1

在 HTML5 之前，只有在将文件内容上传到服务器并从那里进行处理后才能访问文件内容。如果不先提交表单，浏览器将无法对该文件执行任何操作。

编辑:

从上面 Neil McGuigan 的评论来看，HTML5 FileReader API 似乎可以完成您需要的一些事情。我从来没有用过这个，但更多信息可以在这里找到:https://developer.mozilla.org/en-US/docs/Web/API/FileReader/