6

我想用一个按钮“上传按钮”上传一个文件，点击它会打开文件选择器，如果选择了文件，它必须上传它。

该视图不应显示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.');
                }
            });
        }
    }
}]
});
4

4 回答 4

6

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

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

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

于 2013-10-31T02:18:15.877 回答
3

我认为我的示例会对您有所帮助.. 选择将发送 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 请求代码放在侦听器中

于 2013-10-29T11:59:40.260 回答
1

文件上传字段

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

};

希望能帮助到你 ：）

于 2013-10-29T06:29:35.233 回答
1

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

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

希望有帮助，加油。

于 2014-10-14T18:19:58.033 回答