Extjs4 一键上传文件答案

【问题标题】：Extjs4 Upload file with just one buttonExtjs4 一键上传文件
【发布时间】：2013-11-08 04:24:21
【问题描述】：

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

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

【问题讨论】：

标签： file extjs file-upload

【解决方案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);
                 }
       });
   }

};

希望对你有帮助:)

【讨论】：

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

【解决方案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 请求代码放在监听器中

【讨论】：

【解决方案3】：

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

也可以使用hideLabel : true 隐藏字段标签。

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

【讨论】：

【解决方案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'
    });

希望对你有帮助，干杯。

【讨论】：