ExtJS 3.4.0 - Upload File from Ext.Window

最近使用到ExtJS Window介面來結合上傳檔案的功能，雖然官方有提供範例，不過還是改寫

了前端的code及兜了一個server-side為JSP處理的部分(原本為PHP)來做個紀錄。

主要是透過介面上的按鈕來叫出Ext.Window的視窗，搭配Ext.FormPanel來送出表單，再透過

JSP程式內使用SmartUpload jar撰寫Java code來將檔案寫入至相關目錄，並回傳訊息至前端。


前端code

需先載入

ux/fileuploadfield/FileUploadField.js
ext-all.js
adapter/ext/ext-base.js
resources/css/ext-all.css
ux/fileuploadfield/css/fileuploadfield.css

相關路徑可自行參酌ExtJS example

Ext.onReady(function(){

Ext.QuickTips.init();

var dlgForm = new Ext.FormPanel({
     //use your own!
     url: 'file-upload.jsp',
     labelAlign: 'top',
     frame: true,
     border: false,
     fileUpload: true,
     autoHeight: true,
     defaults: {
         anchor: '95%',
         allowBlank: false,
         msgTarget: 'side'
     },
     items: [
     {
         xtype: 'fileuploadfield',
         id: 'form-file',
         fieldLabel: 'File with data',
         name: 'dataFile',
         buttonText: '',
         width: 100,
         buttonCfg: {
             iconCls: 'icon-file-upload'
         }
     }]
 });

var dlgWindow = new Ext.Window({
     id: 'data-upload',
     layout: 'fit',
     width: 350,
     autoHeight: true,
     plain: true,
     modal: true,
     border: false,
     title: 'Upload data file',
     items: dlgForm,
     buttons: [ {
         text: 'Submit',
         scope: this,
         handler: function() {
             dlgForm.getForm().submit({
                 waitMsg: 'Saving file...',
                 success: function (form, action) {
                  var json_t = Ext.util.JSON.decode(action.response.responseText);
                  Ext.Msg.alert('Success', json_t.info);
                  dlgForm.getForm().reset();
                  dlgWindow.hide();
                 },
                 failure: function(form, action) {
                  var json_t = Ext.util.JSON.decode(action.response.responseText);
                  Ext.Msg.alert('Failed', json_t.info);
                 }
             });
         }
     }, {
         text: 'Cancel',
         handler: function() {
             dlgWindow.hide();
          }
     } ]
 });
 
 Ext.get("uploadxls").on('click', function(){
  dlgWindow.show();
 });

}

針對dlgWindow變數定義相關的Window屬性設定，並搭配button's id => uploadxls來顯示該

視窗。dlgForm定義了上傳檔案的項目，並且設定post的url檔案。


後端code => file-upload.jsp

使用到套件為
java-json.jar
smartupload.jar

try{
 response.setHeader("Cache-Control", "no-cache");
 SmartUpload su = new SmartUpload();
 su.initialize(pageContext);
 su.setAllowedFilesList("xls");
 su.upload();
 com.jspsmart.upload.File file = su.getFiles().getFile(0);
 System.out.println("file name:" + file.getFileName());
 
 file.saveAs("uploadFileTest.xls", su.SAVE_PHYSICAL);
 
 JSONObject json = new JSONObject();
 json.put("success", true);
 json.put("info", "upload success!");
 response.getWriter().print(json.toString());
 response.getWriter().flush();  
}catch(Exception e){
 e.printStackTrace();
 response.getWriter().print(e.getMessage());
}finally {  
    try {  
        response.getWriter().close();  
    } catch (IOException e) {  
        e.printStackTrace();  
    }  
}  

在這邊要注意的是，response print的內容為JSON格式，且若指定的success = true，在前端

submit後才會進入success function，否則會進入failure function。

console.log印出action的訊息

若回傳的訊息沒設定success = true，則result屬性的值為false，此時即使後端處理得很順利

還是會進入failure function內處理。

PS. 若後來才追加JSON格式success = true的部分，記得在code前面的header設定no-cache，否

則會被cache住。

官方文件

result : Object

The decoded response object containing a boolean success property and other, action-specific properties.

Available since: 1.1.0

DEMO

由於沒特別指定路徑，因此檔案就跑到根目錄的位置