ExtJS：檔案上傳執行個體

標籤：extjs   檔案上傳   執行個體   

ExtJS：檔案上傳執行個體

var ext_dateFormat = ‘Y-m-d H:i:s‘;var dateFormat = ‘yyyy-MM-dd HH:mm:ss‘;var date = new Date();Ext.onReady(function() {var fifp =Ext.create(‘Ext.form.Panel‘, {        renderTo: ‘fi-form‘,        width: 500,        frame: true,        title: ‘檔案上傳‘,        bodyPadding: ‘10 10 0‘,        defaults: {            anchor: ‘100%‘,            allowBlank: false,            msgTarget: ‘side‘,            labelWidth: 80        },        items: [{            xtype: ‘textfield‘,            fieldLabel: ‘樣品編號‘,            id:‘finfo‘,            name:‘finfo‘        },{         xtype: ‘container‘,             layout: ‘hbox‘,             items: [{             xtype: ‘textfield‘,                 fieldLabel: ‘當前經度‘,                 id:‘flongitude‘,                 name:‘flongitude‘,                 msgTarget: ‘side‘,                 allowBlank: false,                 labelWidth: 80             }, {             xtype: ‘textfield‘,                 fieldLabel: ‘當前緯度‘,                 id:‘flatitude‘,                 name:‘flatitude‘,                 msgTarget: ‘side‘,                 allowBlank: false,                 labelWidth: 80             }]        },{xtype : ‘textfield‘,fieldLabel : ‘上傳時間‘,id : ‘ftime‘,name : ‘ftime‘,// yyyy-MM-dd HH:mm:ssvalue : Ext.Date.format(new Date(date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds()), ext_dateFormat),listeners : {‘focus‘ : function() {WdatePicker({dateFmt : dateFormat});}}        },{            xtype: ‘filefield‘,            id: ‘fiupload‘,            emptyText: ‘請點擊右邊按鈕選擇檔案！‘,            fieldLabel: ‘選擇檔案‘,            name: ‘fiupload‘,            buttonText: ‘瀏覽檔案‘,            buttonConfig: {                iconCls: ‘upload-icon‘            }        }],        buttons: [{            text: ‘儲存檔案‘,            handler: function(){                var fiform = this.up(‘form‘).getForm();                if(fiform.isValid()){                    fiform.submit({                    type : ‘ajax‘,                          url: ‘files/addData.action‘,                        method : "POST",                        waitMsg: ‘ 正在上傳，請稍候...‘,                        success: function(form, action) {                        Ext.Msg.alert(‘Success‘,‘檔案上傳成功！‘);                        },                    failure:function(form, action)                    {                    Ext.Msg.alert("Failure","檔案上傳失敗");                    }                    });                }            }        },{            text: ‘重新上傳‘,            handler: function() {                this.up(‘form‘).getForm().reset();            }        }]    });});

幕後處理核心類方法：

private static final int BUFFER_SIZE = 16 * 1024;public String addData() throws Exception {Timestamp ts = new Timestamp(System.currentTimeMillis());SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");// 設定日期格式ts = Timestamp.valueOf(this.ftime);System.out.println(ts);String nowtime = df.format(new Date());System.out.println("uploadFileName = " + this.fiuploadFileName);System.out.println("uploadContentType = " + this.fiuploadContentType);System.out.println(nowtime);// upload -- wapps 下面的檔案夾,用來存放圖片String toSrc = ServletActionContext.getServletContext().getRealPath("upload")+ "/" + nowtime + getFileExp(this.fiuploadFileName); // 使用時間戳作為檔案名稱String toFilename = nowtime + getFileExp(this.fiuploadFileName);String toSrcPath = "./upload/" + toFilename;String toinfo = this.finfo;Double tolongitude = Double.parseDouble(this.flongitude);Double tolatitude = Double.parseDouble(this.flatitude);System.out.println("原檔案名稱 ： " + this.fiuploadFileName);System.out.println("檔案描述 ： " + toinfo);System.out.println("存放路徑： " + toSrcPath);System.out.println("存放檔案名稱： " + toFilename);System.out.println("當前經度 ： " + tolongitude);System.out.println("當前維度 ： " + tolatitude);File toFile = new File(toSrc);writeFile(this.fiupload, toFile);Files files = new Files(ts, toFilename, toSrcPath, toinfo, tolatitude,tolongitude);String result = filesService.addData(files);System.out.println(result);success = true;return SUCCESS;}private static void writeFile(File src, File dst) {System.out.println(" == 檔案寫入 == ");try {InputStream in = null;OutputStream out = null;try {in = new BufferedInputStream(new FileInputStream(src),BUFFER_SIZE);out = new BufferedOutputStream(new FileOutputStream(dst),BUFFER_SIZE);byte[] buffer = new byte[BUFFER_SIZE];while (in.read(buffer) > 0) {out.write(buffer);}} finally {if (null != in) {in.close();}if (null != out) {out.close();}}} catch (Exception e) {e.printStackTrace();}System.out.println(" == 寫入成功！ == ");}

ExtJS：檔案上傳執行個體