Extjs formPanel 디스플레이 이미지 + 업로드

    //uploadFile.js   

    

    Ext.onReady(function() {   

    

  var fileForm = new Ext.form.FormPanel({   

   title : "",   

   renderTo : "fileUpload",   

   fileUpload : true,   

   layout : "form",   

   id : "fileUploadForm",   

   items : [{   

      id : 'upload',   

      name : 'upload',   

      inputType : "file",   

      fieldLabel : ' ',   

      xtype : 'textfield',   

      anchor : '40%'  

    

     }, {   

          

      xtype : 'box',   

      id : 'browseImage',   

      fieldLabel : " ",   

      autoEl : {   

       width : 300,   

       height : 350,   

       tag : 'img',   

       // type : 'image',   

       src : Ext.BLANK_IMAGE_URL,   

       style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',   

       complete : 'off',   

       id : 'imageBrowse'  

      }   

    

     }],   

         

     //form    

   listeners : {   

    'render' : function(f) {   

     //   

     this.form.findField('upload').on('render', function() {   

      // change ,    

      Ext.get('upload').on('change',   

        function(field, newValue, oldValue) {   

    

         //    

         var url = 'file://'  

           + Ext.get('upload').dom.value;   

               

        // alert("url = " + url);   

         //    

         if (img_reg.test(url)) {   

    

          if (Ext.isIE) {   

           var image = Ext.get('imageBrowse').dom;   

           image.src = Ext.BLANK_IMAGE_URL;//     

           image.filters   

             .item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;   

    

          }//  FF   

          else {   

           Ext.get('imageBrowse').dom.src = Ext   

             .get('upload').dom.files   

             .item(0).getAsDataURL()   

          }   

         }   

        }, this);   

     }, this);   

    }   

   },   

   buttons : [{   

      text : " ",   

      name : "submit",   

      handler : submit   

     }]   

  });   

    

  //     

  var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/   

    

 });   

    

 // ，   

 function submit() {   

  Ext.getCmp("fileUploadForm").getForm().submit({   

    

     url : "uploadAction.action",   

     method : "POST",   

     success : function(form, action) {   

      alert("success");   

     },   

     failure : function(form, action) {   

      alert("failure");   

     }   

    });   

 }