ExtJS 강좌 - 파일필드를 이용하여 파일업로드하기(html5를 이용한 다중파일 포함)

지난 포스팅은 간단하게 폼필드에 대해서 작성을 해보았습니다.

2014/10/27 - [웹개발강좌/ExtJS] - ExtJS 강좌 - xtype을 이용하여 html의 입력태그들과 HTML에디터 컴포넌트를 출력시켜보자

이번에는 파일필드에 대해서 알아보도록 하겠습니다.

단일 파일업로드 ~ HTML5를 이용하여 버튼하나로 다중파일업로드까지 처리해보도록 하겠습니다.

서버페이지 관련 로직은 본인이 파일업로드시 처리하시는 PHP/JSP/ASP 등등..  로직을 사용하시면 되겠습니다.

ExtJS 파일필드를 사용한 싱글파일업로드 샘플코드

Ext.onReady(function(){
		Ext.create("Ext.form.Panel",{
			width : 600,
			renderTo : Ext.getBody(),
			items : [{
				xtype : 'filefield',
				//라벨 정의 
				fieldLabel : '파일첨부',
				//파일첨부 버튼에 텍스트 정의
				//정의 안할시 Browse... 디폴트 정의됨
				buttonText  : '찾아보기',
				//<input type="file" name="fileupload"> 와 동일하게 서버에서 받기위한 name명이 fileupload
				name : 'fileupload'
			},{
				xtype : 'button',
				text : '전송',
				handler : function(btn){
					//form 객체 찾기					
					var frm = btn.up("form").getForm();
					//폼패널 검증
                    if(frm.isValid()) {
                    	//폼 submit 
                        frm.submit({
                        	url: '/fileTest',
                        	waitMsg : '업로드 중...',
                        	success : function(fp, res) {
                        		var jsonResult = Ext.JSON.decode(res.response.responseText);
                        		var msg = "UPLAODED FILE NAME : " + jsonResult.filename+"<br />";
                        		    msg += "UPLAODED FILE SIZE : " + jsonResult.filesize;
                        		Ext.MessageBox.show({
                        					title : '업로드완료',
                        					msg : msg,
                        					buttons : Ext.MessageBox.YES,
                        					icon : Ext.MessageBox.INFO
                   				});
                        	}
                        });
					}
				}
			}]
		})
	})

처음으로 이벤트 핸들러의 코드라인이 많이 길어졌습니다.

로직을 설명드리자면

1. name값이 'fileupload' 라는 filefield를 폼필드 내에 선언 한 다음  handler를 이용하여 버튼클릭 이벤트 실행

2. 폼양식을 체크 한 후 true일 경우 form필드내에 있는 입력폼들을 submit

3. submit은 ajax call이 일어난 후 success callback 함수를 호출합니다.

    ※ 이경우 서버페이지에서 json object 로 전송받은 데이터들을 받아낼 수 있으며 별도로 화면 제어가 가능

4. formsubmit의 속성중 url은 submit url 페이지를 의미 form 태그의 action과 동일

5. waitMsg의 경우 submit 하는 도중 로딩바기능처럼 화면에 진행상태를 표시해주는 역할

callback으로 받은 스크립트 코드중, res.response.responseText라는 부분이 있습니다.

이 코드는 서버에서 전달한 json object를 담아온 데이터입니다. 

하지만 object 타입이 아닌 text 타입이므로 Ext.JSON.decode를 이용하여 json object로 변경을 해준 것입니다.

Ext.Message.show는 전에 다이얼로그창 강좌에서 작성한 내용중 일부 컴포넌트를 작성한 내용입니다.

2014/10/23 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 다이얼로그창을 이용하여 깔끔하게 종류별로 메시지창 띄워보기

서버페이지는 샘플용으로 저는 다음과 같이 작성 해보았습니다.

저같은 경우는 Spring3 MVC + jackson(json api) 를 이용한 샘플 서버코드입니다.

Vo.java 클래스 샘플코드

// filefield에서 정의해준 name값
private MultipartFile fileupload;
public MultipartFile getFileupload() {
	return fileupload;
}
public void setFileupload(MultipartFile fileupload) {
	this.fileupload = fileupload;
}

Controller 샘플코드

@RequestMapping(value="/fileTest")
public @ResponseBody Map<String, Object> fileTest(Vo vo, HttpServletRequest request, HttpServletResponse response) {
	Map<String, Object> map = new HashMap<String, Object>();
        //필수 값
	map.put("success", true);
	map.put("filename", vo.getFileupload().getOriginalFilename());
	map.put("filesize", vo.getFileupload().getSize());
	return map; 
}

서버코드에서 필수로 json object에 넘겨줘야 할 key/value 값은 

success key 값에 value가 true로 넘겨주어야 클라이언트부분에 success callback 호출이 가능합니다.

실행결과는 다음과 같습니다.

싱글파일업로드 실행결과

실행결과 다음처럼 싱글 파일 업로드가 완료되었습니다.

이어서 HTML5를 이용하여 다중파일업로드를 진행해보도록 하겠습니다.

HTML5를 이용한 다중파일 업로드

Ext.onReady(function(){
		Ext.create("Ext.form.Panel",{
			width : 600,
			renderTo : Ext.getBody(),
			items : [{
				xtype : 'filefield',
				buttonOnly: true,
				buttonText  : '파일첨부',
				//<input type="file" name="fileupload"> 와 동일하게 서버에서 받기위한 name명이 fileupload
				name : 'fileupload',
				listeners:{
                    afterrender:function(object){
                    	//input type="file" 태그 속성중  multiple이라는 속성 추가
                    	object.fileInputEl.set({multiple:'multiple'});
                    },
                    change : function(object, value, eOpts ){
                    	//파일첨부를 다중으로 선택시 열시버튼 누르면
                    	//change 이벤트를 발생시켜 폼 submit!
                      
                    	var frm = object.up("form").getForm();
                        if(frm.isValid()) {
                            frm.submit({
                            	url: '/fileTest',
                            	success : function(fp, res) {
                            		//json text to json object
                            		var jsonResult = Ext.JSON.decode(res.response.responseText);
                            		var msg = "업로드된 파일명<br/>";
                            		//jQuery $.each 와 동일 문법
                            		Ext.each(jsonResult.filelist,function(object){
                            			msg += object.filename+"("+object.filesize+" byte)"+",";
                            		});
                            		msg = msg.substring(0,msg.length-1);
                            		Ext.MessageBox.show({
                            					title : '업로드완료',
                            					msg : msg,
                            					buttons : Ext.MessageBox.YES,
                            					icon : Ext.MessageBox.INFO
                       				});
                            		//한번 submit 처리가 되면 filefield는 초기화 되므로
                            		//다시 filefield에 multiple 속성 설정
                            		object.fileInputEl.set({multiple:'multiple'});
                            	}
                            });
                    	}
                	}
            	}
			}]
		})
})

싱글 파일업로드 경우 버튼 클릭 핸들러를 적용하여 서버로 submit 처리를 하였지만 

다중파일은 change 이벤트 적용시 form submit 처리를 하도록 하였습니다.

현재 extjs5에서 filefield에 별도로 multiple 속성값을 제공하지 않는 관계로 

임의로 파일태그내에 multiple 속성을 별도로 지정해주었습니다.

change 이벤트로 싱글파일업로드도 가능합니다.

1. afterrender : 랜더링이 완료 된후에 발생되는 기능정의를 의미하는 것인대 함수내 정의한 코드를 보시면 

                      xtype이 filefield내에 fileInputEl속성의 set함수를 이용하여 input type="file" 태그에  multiple="multiple" 이란  

                      HTML5 다중파일 속성을 지정하였습니다.

2. change : 파일첨부가 일어나는 시점에 발생되는 이벤트입니다. 이 코드를 이용하여 단일 파일업로드도 가능합니다.

                 이어서 설명드리자면 파일첨부 버튼 클릭 후 파일탐색기에서 여러개 파일 선택 후 열기 버튼 클릭시 

                 자동으로 form submit이 되게 처리 하였습니다.

                 submit 후 callback 부분은 기존 싱글파일업로드와 동일하지만 마지막 코드에 추가로 또한번 multiple 속성을 

                 지정해주었습니다.

                 재지정해준 이유는 form submit이 이루어 진후 multiple 속성이 초기화 되는 문제로 다시한번 multiple 속성을 지정해 

                 준것입니다.

변경된 서버코드는 다음과 같이 작성되었습니다.

Vo.java 클래스 샘플코드

//다중파일에 정의한 filefield name명
private ArrayList<MultipartFile> fileupload;
public ArrayList<MultipartFile> getFileupload() {
	return fileupload;
}
public void setFileupload(ArrayList<MultipartFile> fileupload) {
	this.fileupload = fileupload;
}

Controller 샘플코드

@RequestMapping(value="/fileTest")
public @ResponseBody Map<String, Object> fileTest(ConnectionInfo connectionInfo, HttpServletRequest request, HttpServletResponse response) {
		Map<String, Object> map = new HashMap<String, Object>();
		Map<String, Object> map2 = null;
		ArrayList<Map<String, Object>> list = new ArrayList<Map<String,Object>>();
		if(connectionInfo.getFileupload() != null && connectionInfo.getFileupload().size() > 0) {
			for(MultipartFile file : connectionInfo.getFileupload()) {
				map2 = new HashMap<String, Object>();
				map2.put("filename", file.getOriginalFilename());
				map2.put("filesize", file.getSize());
				list.add(map2);
			}
		}
		
		map.put("success", true);
		map.put("filelist", list);
		return map; 
}

실행결과를 보도록 하겠습니다.

다중파일업로드 실행결과

실행결과 위화면처럼 다중파일업로드 결과가 출력되었습니다.

현재는 리스너 속성내에 정의된 이벤트들에 대한 이해가 안오시는 분들이 대부분이실 겁니다.

다음시간에는 간단하게 ExtJS의 Document 문서를 보면서 

컴포넌트들의 주요속성 및 이벤트 핸들링에 대한 이해를 돕고자 

설명을 진행을 하도록 하겠습니다.

문서 보는법을 간단하게나마 익히셔야 앞으로 포스팅 하는 내용들을 이해하실 수 있을 겁니다.

by 개발로짜