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隐藏字段标签。

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

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请求代码放在侦听器中

Answer 3

文件上传字段

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

};

希望它有所帮助：）

Answer 4

以下是我遇到同样问题时所做的事情：

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

希望它有所帮助，干杯。

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

4 个答案: