只需一个按钮即可上传文件的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.');
                }
            });
        }
    }
}]
});

- Jamol

Answer 1

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

同时使用hideLabel : true来隐藏字段标签。

将上传文件代码包含在上传文件字段事件侦听器中。 希望有所帮助。

- Harry

Answer 2

我认为我的示例将对你有所帮助.. 选择文件后无需点击上传按钮，它将发送ajax请求。

Ext.onReady(function(){

    Ext.create('Ext.form.Panel', {
    title: 'Upload a Photo',
    width: 400,
    bodyPadding: 10,
    frame: true,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        name: 'photo',
        listeners:{
            change:function( thiss, value, eOpts ){
                  alert(value);
                  //here place your ajax request
            }
         },
        fieldLabel: 'Photo',
        labelWidth: 50,
        msgTarget: 'side',
        allowBlank: false,
        anchor: '100%',
        buttonText: 'Select Photo...'
    }]
    });
});

注意：将你的Ajax请求代码放在监听器中。

- Surya Prakash Tumma

Answer 3

这是我遇到相同问题时所做的：

var form = Ext.create('Ext.form.Panel', {
        items: new Ext.create('Ext.form.field.File', {

            buttonOnly: true,
            hideLabel: true,
            buttonText: 'Carregar Playlist.',
            listeners: {
                'change': function(fb, v) {
                    form.getForm().submit({
                        method: 'POST',
                        url: 'carregaLista.php',
                    });
                }
            }
        }),
        //renderTo: 'buscaPlaylist'
    });

希望它有所帮助，干杯。

- Lucas César

Answer 4

文件上传字段

items:[{ xtype : 'fileuploadfield', 
anchor : '100%', 
emptyText : 'Select File',
name : 'fileData', 
fieldLabel : 'Select File', 
allowBlank : false, 
forceSelection : true 
}]

上传处理程序。

function() {
    var form = Ext.getCmp('form').getForm();
    if(form.isValid()) {
     form.submit({
        url : uploadFileURL,
        headers : {'Content-Type':'multipart/form-data; charset=UTF-8'},
        method : 'POST',
                waitMsg : 'Please wait...while uploading..!!',
                success : function (form, action) {
                        Ext.Msg.alert('Upload file..', action.result.message);
            Ext.getCmp('uploadWindow').destroy();
                 },
                 failure: function(form, action) {
                 Ext.Msg.alert('Upload file..', action.result.message);
                 }
       });
   }

};

希望能有所帮助 :)

- Ankur

---

视图不应显示input[type=file]或任何其他标签。我想用一个按钮完成上传操作。 - Jamol