[ExtJS강좌 20] 파일컴포넌트를 이용하여 파일업로드를 하자 (xtype : 'fieldfield')

원래는 지난시간을 끝으로 컴포넌트를 마무리하고자 하였으나, 몇가지를 확인해 보니 컴포넌트 몇가지를 빼먹었더라..

폼관련 강좌를 올렸을때 파일컴포넌트와 html에디터를 빼버린것!! 

오마이갓..

파일컴포넌트에 대한 설명은 크게 두가지만 설명하도록 하겠음....

1. 기본 파일태그로 서버에 파일전송

2. 파일버튼만보여주고 파일첨부시 서버에 파일전송

이두가지를 다루어 보도록 하겠다으~~ 

설정이 되지 않은 상태라면 다음 포스팅을 보며 설정을 한 후 진행하도록 하자

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

설정이 마무리 되었다면 일반적인 HTML에서도 우리는 파일전송을 해주기 위해서 보통 form태그 안에 넣고 submit을 날린다.

이와같이 formpanel안에 filefield를 정의해주자

1. 기본파일 태그로 서버에 파일 전송하기 

Ext.onReady(function(){
	   //폼패널
	   Ext.create('Ext.form.Panel',{
		   //폼패널 타이틀
		   title : '폼패널 - 파일첨부',
		   //지정위치
	       renderTo : Ext.getBody(),
	       items : [
				{
					//<input type="file" /> 와 같은개념
					xtype : 'filefield',
					//기존에 않넣어도 됐었는데 추가된듯...
					reference: 'basicFile',
					name : 'uploadFile',
					fieldLabel : '파일첨부',
					//fieldLabel의 위치 
					labelAlign : 'left',
					allowBlank : false,
					// html5의 placeholder와 유사하다
					emptyText : 'Add SQL File...',
					// 속성을 정의안하면 default Browser.. 으로 버튼이 생성된다.
					buttonText : '찾아보기'
				}
			],
			fbar : [
				{
					//서버에 SUBMIT을 하기 위한 버튼
					xtype : 'button',
					text : '파일전송',
					//클릭이벤트 발생
					handler : function(btn){
						//form패널객체를 얻는다
						var frm = btn.up("form").getForm();
						//뭐 검증같은건대 그냥 써주자
						if(frm.isValid()) {
							//폼 submit 날리는 옵션 
				    		frm.submit({
				    			//url을 지정해주자
			                	url: '/uploadFile'
			                });
				    	}
					}
				}        
			]
	   })
})

위와같이 하고 서버페이지에서 파일이 제대로 넘어왔는지 확인해보자

본인은 java 기준이라 이클립스 -> 콘솔에서 파일명을 한번 찍어봤음

일반 html태그와 똑같이 formpanel안에 있는 각각의 xtype들의 값을 서버에서 받기위해서는 

각 xtype들마다 name : '서버에서받을name'

을 지정해주어야 한다.

서버 로직은 뭐 일반 파일처리하는 로직이랑 같으니 생략~~

실행화면이다.

012

2. 파일버튼만보여주고 첨부시 서버에파일전송

다음으로는 버튼만으로 파일 처리를 해보도록 하자

말이 버튼만이지 실제로는 파일태그에 찾아보기 버튼만 보여지는 것이다.

1. 에서는 버튼 클릭이벤트로 서버에 파일을 전송하였다면, 

2.에서는 파일태그에 값이 들어가는 시점

즉, change 이벤트가 발생할때 서버에 submit 하는 방식이다.

그렇다면 아직 설명은 하지 않았지만 지금까지 강의를 하면서 한두번정도 언급을 했던걸로 아는데

이벤트 등록을 하기위해서는 리스너에 이벤트를 지정해주는 것이다.

filefield에 우선 change 이벤트가 지원되는지 extjs의 api documents 페이지를 확인하도록 하자

확인결과 지원을 해준다.

그렇다면 리스너에 change 이벤트를 한번 적용해보도록 하자

1. 기본파일 태그로 서버에 파일 전송하기  소스에 이어서 진행을 할것이다.

1) 기존소스에서 전송버튼은 필요없으니 fbar 속성을 통째로 지우자

2) 기존 xtype : 'filefield' 의 속성들을 다음과 같이 변경해주자(리스너 포함)

                                        //<input type="file" /> 와 같은개념
					xtype : 'filefield',
					//기존에 않넣어도 됐었는데 추가된듯...
					name : 'sqlUpload',
					buttonText : '찾아보기',
					buttonOnly: true,
					listeners : {
						change : function( obj, value, eOpts ){
							//form패널객체를 얻는다
							var frm = obj.up("form").getForm();
							//뭐 검증같은건대 그냥 써주자
							if(frm.isValid()) {
								//폼 submit 날리는 옵션 
					    		frm.submit({
					    			//url을 지정해주자
				                	url: '/uploadFile'
				                });
					    	}
						}            
					}

change 이벤트내에 정의된 로직은 기존 소스의 button 이벤트 발생시 적용했던 소스랑 같다.

즉, change 이벤트 발생시 서버로 form을 전송하겠다는것이다!! 

서버페이지는 변경된것은 전혀없다

버튼으로만 파일첨부하는 실행화면을 보도록 하자

01

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!