extjs带进度条的多文件上传和图片预览

Ext.create('Ext.form.Panel', {
    title: 'File Upload Form',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        name: 'file',
        fieldLabel: 'File',
        labelWidth: 50,
        msgTarget: 'side',
        allowBlank: false,
        anchor: '100%',
        buttonText: 'Select Files',
        multiple: true // 允许多文件上传
    }, {
        xtype: 'button',
        text: 'Upload',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    url: 'upload.php', // 服务器端处理上传的脚本
                    waitMsg: 'Uploading your files...',
                    progress: true,
                    success: function(form, action) {
                        Ext.Msg.alert('Success', 'Files uploaded successfully');
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', 'Upload failed');
                    }
                });
            }
        }
    }]
});

{
    xtype: 'filefield',
    name: 'file',
    fieldLabel: 'File',
    labelWidth: 50,
    msgTarget: 'side',
    allowBlank: false,
    anchor: '100%',
    buttonText: 'Select Files',
    multiple: true,
    listeners: {
        change: function(field, value) {
            var files = field.fileInputEl.dom.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                if (file.type.match('image.*')) {
                    var reader = new FileReader();
                    reader.onload = (function(theFile) {
                        return function(e) {
                            var img = Ext.create('Ext.Img', {
                                src: e.target.result,
                                width: 100,
                                height: 100,
                                margin: '5 5 5 5'
                            });
                            Ext.getCmp('previewPanel').add(img);
                        };
                    })(file);
                    reader.readAsDataURL(file);
                }
            }
        }
    }
}