Extjs4只用一個按鈕上傳文件

我想上傳一個文件只需點擊一個按鈕「上傳按鈕」，點擊後會打開文件選擇器，如果選擇了文件，則必須上傳文件。Extjs4只用一個按鈕上傳文件

視圖不應該顯示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.'); 
       } 
      }); 
     } 
    } 
}] 
});

來源

2013-10-29 Jamol

我覺得buttonOnly : true是你所需要的配置。它將隱藏文件路徑字段。

還使用hideLabel : true來隱藏字段標籤。

將上傳文件代碼包含在上傳文件字段事件偵聽器中。希望它有幫助。

來源

2013-10-31 02:18:15 Meister

文件上傳現場

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-29 06:29:35 Ankur

該視圖不應該顯示輸入[類型=文件]或任何其他標籤。我只想用一個按鈕就可以完成上傳操作。 – Jamol

我覺得我的例子可以幫助你..無需點擊上傳按鈕，一旦你選擇文件將sents 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-29 11:59:40

這裏就是我所做的，當我有同樣的問題：

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-14 18:19:58

Extjs4只用一個按鈕上傳文件

回答

相關問題