ExtJS 3.4.0 - Upload Multiple Files

由於一般上傳的按鈕在跳出視窗選擇檔案時只能拉取一檔案做上傳，而在這邊要探討的是如

何利用ExtJS搭配HTML5語法及相關的後端程式來做處理，達到可以一次選取多個檔案做上

傳的目的。

首先一樣先載入相關的JS Library

ext-all.js
adapter/ext/ext-base.js
resources/css/ext-all.css

HTML部分

<form id="myform" name="myform"  method="post" enctype="multipart/form-data">
 <div id="content"></div>
</form>

建立一div區塊，到時會定義一ExtJS Container與它做綁定

ExtJS部分

Ext.onReady(function(){
    Ext.QuickTips.init();
var container = new Ext.Container({
  width: 300,
  layout: 'column',
  items:[
   {
    xtype: 'textfield',
    inputType: 'file',
    fieldLabel: 'Multiple file selection',
    autoCreate: { 
     tag: 'input',
     type: 'text',
     size: '20',
     autocomplete: 'off',
     multiple: 'multiple' 
    }
   },
   {
    xtype: 'button',
    text:'確認',
    id:'doForm',
    listeners: {
     click: function() {
      Ext.Ajax.request({
       url: 'more-files-upload.jsp',
       form: myform,
       method: 'POST',
       success: function ( result, request) {
        var json_t = Ext.util.JSON.decode(result.responseText);
                    Ext.Msg.alert('Success', json_t.info);
       },
       failure: function ( result, request) {
        Ext.Msg.show({
         title  : '訊息',
         msg    : '上傳失敗!!',
         buttons: Ext.Msg.OK,
         closable:false,
         icon   : Ext.Msg.ERROR
        });
       }
      });
     }
    }
   }
  ],
  style: 'margin:20px'
 });
 
 container.render('content');
});

Container內另外定義一textfield其type為file及一button，並且針對file多加一屬性multiple。

而multiple屬性以IE來講需要10才有支援，屬於HTML5新加的屬性

http://www.w3schools.com/tags/att_input_multiple.asp

JSP部分

與之前這篇文章一樣，後端改寫一下需針對實際的檔案數目來做各別save的動作，搭配

smartupload library省事很多!

try{
  response.setHeader("Cache-Control", "no-cache");
  SmartUpload su = new SmartUpload();
  su.initialize(pageContext);
  su.setAllowedFilesList("txt");
  su.upload();
  
  for(int i = 0 ; i < su.getFiles().getCount() ; i++){
   com.jspsmart.upload.File file = su.getFiles().getFile(i);
   System.out.println(">>>>>>file name:" + file.getFileName());
   file.saveAs("uploadFileTest_"+i+".txt", 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();  
     }  
 } 

DEMO