[ExtJS강좌 28] ExtJS filefield태그의 multiple 속성을 주어 HTML5 다중파일 업로드 처리하기

요즘 ExtJS로 티스토리 스킨 제작중이라 포스팅에 소홀했음... 

오늘은 ExtJS에서 어느분께서 HTML5 의 FILE태그중, MULTIPLE 속성을 주어 다중파일 업로드 처리에 대하여 질문해주셔서 한번 선택으로 다중 파일업로드 관련 포스팅을 진행 하겠음..

개념은 FILEFIELD 여러개를 받을수 있는 서버로직이 1차적으로 필요하다.

본인은 SPRING 프레임워크를 이용하여 서버로직을 제작한 후 테스트 하였음

private ArrayList<MultipartFile> uploadFile;

filefield 태그의 name명을 uploadFile이라고 주고 진행을 하겠음

간단하게 기본 폼필드와 단일 파일업로드 관련 샘플링은 다음 글을 참고하면 될듯.

2014/07/02 - [자바스크립트이야기/ExtJS] - [ExtJS강좌 20] 파일컴포넌트를 이용하여 파일업로드를 하자 (xtype : 'fieldfield')

이어서 다중 파일 업로드의 ExtJS 스크립트코드이다 .

Ext.onReady(function(){
	       var panel = Ext.create('Ext.form.Panel',{
	           title : '폼패널 - 파일첨부',
	           renderTo : Ext.getBody(),
	           items : [{
	                    xtype : 'filefield',
	                    name : 'uploadFile',
	                    buttonOnly: true,
	                    allowBlank : false,
	                    buttonText : '찾아보기',
	                    listeners:{
	                        afterrender:function(fileObj){
	                        	//파일태그옵션에 multiple이라는 옵션을 정의
	                        	fileObj.fileInputEl.set({
	                                multiple:'multiple'
	                            });
	                        },
	                        change : function(){
	                        	//파일첨부를 다중으로 선택시 열시버튼 누르면
	                        	//change 이벤트를 발생시켜 폼 submit!
	                        	var frm = panel.getForm();
	                            if(frm.isValid()) {
	                                frm.submit({
	                                	url: '/uploadFile',
	                                	success : function(fp, res) {
	                                		var jsonResult = Ext.JSON.decode(res.response.responseText);
	                                		var msg = "업로드된 파일명<br/>";
	                                		Ext.each(jsonResult.fileList,function(obj){
	                                			msg += obj.fileName+",";
	                                		});
	                                		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 속성 설정
	                                		panel.down("filefield").fileInputEl.set({
	                                			multiple:'multiple'
	                                		});
	                                	}
	                                });
                            	}
                        	}
                    	}
				}]
	       })
	})

기존 단일 파일업로드와 차이가 있다면 

1. extjs 파일 컴포넌트내의 file 태그의 속성중 multiple 속성을 설정해주기 위한 

    afterrender 리스너 등록

2. 파일 버튼에서 태그가 변경시 자동으로 submit 해주는 change 리스너 등록

※ 주의할점은 multiple 속성은 한번 submit을 처리하면 사라지므로 submit이 발생된후에 다시 multiple 설정을 해주어야 함

본인의 submit하는 서버 로직은 다음과 같다.

파일처리는 제외하였다.

어짜피 파일데이터가 넘어가느냐만 확인하기 위한 테스트 로직이므로 

로직 사이에 파일처리 하는 로직을 추가로 설정 하면 되겠음.

@RequestMapping(value="/uploadFile", method=RequestMethod.POST)
	public void uploadFile (FileVo fileVO, HttpServletRequest request, HttpServletResponse response) {
                //fileVO 안에 다중 파일값을 받기위한  private ArrayList<MultipartFile> uploadFile; 가 존재함
		JSONObject jsonObj = null;
		JSONObject jsonObj2 = null;
		try {
			JSONArray jsonArr = new JSONArray();
			if(connectionInfo.getUploadFile() != null && connectionInfo.getUploadFile().size() > 0) {
				/**
				 * 반복분 내에서 파일 처리를 해주면 될것이다.
				 */
				for(MultipartFile file : connectionInfo.getUploadFile()) {
					jsonObj2 = new JSONObject();
					jsonObj2.put("fileName", file.getOriginalFilename());
					jsonArr.add(jsonObj2);
				}
			}
			jsonObj = new JSONObject();
			//form submit에서 json 데이터로 success true 값을 받아야함
			jsonObj.put("success", true);
			jsonObj.put("fileList", jsonArr);
		} catch (Exception e) {
			e.printStackTrace();
		} finally{
			try {
                                response.setContentType("text/plain; charset=UTF-8");
				PrintWriter pw = response.getWriter();
				pw.print(jsonObj);
				pw.flush();
				pw.close();
			} catch (IOException e) {}
		}
	}

실행해보도록 하자

최초실행 

3가지 이미지파일 선택

form submit 이벤트 발생후 json response를 통해서 받은 

업로드 파일명

다시한번 찾아보기 버튼 클릭 후 파일첨부 실행

두번째 파일업로드된 파일명 출력

테스트 결과 잘 나온다. 

해당 샘플링을 잘 응용하여 멀티파일 업로드를 처리하도록 하자.

※ IE에서 MULTIPLE 속성은 IE9인가 10부터 지원이 된다고 한다.

    잘 사용하도록 하자.

1. 지속적인 구독을 원하신다면 네이버 이웃추가 부탁드립니다

2. 도움이 되셨다면 공감한번 꾹! 눌러주세요

 

3. 궁금하신점이 있으시다면 댓글 GOGO