Extjs4只需一个按钮即可上传文件

Question

我想上传一个文件只有一个按钮"上传按钮",单击该按钮,打开文件选择器,如果选择了文件,则必须上传它.

视图不应显示input[type=file]或任何其他标签,而只是一个按钮.

我知道使用jQuery或只是javascript很容易,但由于我对Extjs比较新,我在这里写这个寻找你的帮助.

以下是文档中的示例文件上传器.如何自定义它以满足我的需求:

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

Answer 1

我认为buttonOnly : true是你需要的配置.它将隐藏文件路径字段.

也用于hideLabel : true隐藏字段标签.

在上载文件字段事件侦听器中包含上载文件代码.希望它有所帮助.