Servlet-JSP MVC07(3) - Ajax 파일업로드

> 비동기 통신을 통해 파일을 업로드 해볼 것이다.

 

 

1. 화면구성, DB수정,VO 수정

 

 

1.1 파일첨부 화면 띄우기

<div class="form-group">
	    <label class="control-label col-sm-2" for="">첨부파일:</label>
	    <div class="col-sm-10">
	      <input type="file" class="control-label" id="file" name="file">
	    </div>
	  </div>

1.2 DB 수정,VO수정

 

 > 회원가입시 파일을 첨부하는 예제이므로, member별 첨부파일이 있는 것이다.

 > 따라서 DB에 회원별  회원이 저장한 file이름을 함께 저장할 수 있도록  새 table을 만들자

 > VO 또한 filename을 속성으로 가지고 있도록 수정해두자.

create table member2(
 num int primary key auto_increment,
 id varchar(20) not null,
 pass varchar(20) not null,
 name varchar(30) not null,
 age int not null,
 email varchar(30) not null,
 phone varchar(30) not null,
  filename varchar(100),
 unique key(id)
);

public class MemberVO {
	 private int num;
	 private String id;
	 private String pass;
	 private String name;
	 private int age;
	 private String email;
	 private String phone;
	 private String filename;
     //..//
     
     VO에 filename추가

 

2. ajax와 controller

 

2.1 ajax

 function add2(){
    	 if($("#file").val() != ''){ //파일첨부된경우
    		 var formData = new FormData();
    		 formData.append("file",$("input[name=file]")[0].files[0]);
    		 $.ajax({
    			url : "<c:url value='/fileAdd.do'/>", //파일 첨부가 먼저 실행되고(서버에)
    			type : "post",
    			data : formData,
    			processData : false,
    			contentType : false,
    			success : function(data){ //업로드된 파일명 받음(파일업로드와 DB에 저장하는 작업이 분리)
    			
    				$("#filename").val(data); //db로 넘기기 위해 filename이 id인 hidden 인풋태그 //db에 파일명 저장
    				document.form1.action="<c:url value='/memberInsert.do'/>?mode=fadd"; 
    		    	document.form1.submit();
    				
    			},
    			error : function(){alert("error");}
    	
    			 
    		 });
    	 }else{ //파일 첨부안된경우 
    		 	document.form1.action="<c:url value='/memberInsert.do'/>?mode=add"; 
    	    	document.form1.submit();
    	 }
     }

 

 > 파일은 쿼리스트링으로 담을 수 없기때문에 다른 전달방식을 사용해야한다.

 > 제이쿼리를 $(태그[속성=값])으로 사용하면 배열로 리턴되는 듯하다. ($("#input[name=file]")

 > FormData 객체에 input에 담긴 파일을 담고, 이를 ajax를 통해 서버와 통신한다.

 > processData와 contentType 둘다  쿼리스트링과 관련된 옵션이므로, 꺼주도록한다. 

 > 파일을 첨부했을 때와 첨부하지 않았을 때를 구분하기 위해 mode를 추가했다.

 

2.2 controller 

public class FileAddController implements Controller{

	@Override
	public String requestHandler(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	
	 //
	String UPLOAD_DIR ="file_REPO";
	//webcontent아래에 위 폴더 만들 것 (절대경로 찾아오자)
	String UPLOAD_REAL_PATH = request.getServletContext().getRealPath("")+File.separator+UPLOAD_DIR;
	File uppath = new File(UPLOAD_REAL_PATH); //업로드 경로 file객체로 만들었우
	if(!uppath.exists()) {
		uppath.mkdir();
	}
	//여기가 파일 업로드알 진짜! 업로드 경로 
	
	//- 클라이언트가 파일을 업로드하면, -> 
	//서버  JVM 메모리에 넘어온 file을 저장하는 것은 쫌 그렇다..! 
	// 임시 디렉토리를 만들어서 여기다 저장하자 -> 다시 진짜 경로로 보내고, 임시는 지움
	// 임시 dir과 실제 dir을 따로 지정할 수도 있지만 똑같이 지정해도 무방하다.
	// 파일 업로드시 필요한 api 다운받자 - commons-fileupload, commons-io --
	
	// 파일을 업로드 할때 먼저 저장될 임시 저장경로를 설정하자 (결국 동일한 경로지만, 틀은 갖춰야지)
	// 임시저장경로는 file객체로 만들 수 없음 DiskFileItemFactory(파일 여러개 저장하고 있다는 의미로 Factoy)
	//FileItem -> file, Disk->저장공간의미 
	DiskFileItemFactory factory = new DiskFileItemFactory();
	factory.setRepository(uppath);
	factory.setSizeThreshold(1024*1024);//임시저장경로 사이즈 지정 
	
	//업로드 
	String filename = null;
	
	//request에 저장된 데이터 쉽게 꺼내려고 만드는 객체 + 파일 업로드 경로 지정해줘야함
	//ServletFileUpload를 통해 request에 데이터 읽어서 factory에 저장 
	ServletFileUpload upload = new ServletFileUpload(factory);
	try {    //items는 파일 정보들이 저장된 list이다. (FileItem이 저장되어 있다 ) 
		List<FileItem> items =upload.parseRequest(request); // request안에 파일 정보를 쉽게 얻어 올 수 있게 해주는 메서드 
		                                                    // 여러개 파일이 업로드된 경우   
		for(int i=0;i<items.size();i++) {                   // request로 넘어오는게 진짜 FileItem일수도 아닐수도 있음 (일반 파라미터도 FileItem객체로 넘어옴)
			FileItem item = items.get(i);                   // 지금은 ajax로 구현되고 있어서 구별할 필요는 없지만
			                                                // 서버는 ajax로 넘어올지 뭐로 넘어올지 모름 
		
		    if(item.isFormField()) {                        //필드이면
		    	//뭐 할 필요없음
		    }else {
		    	if(item.getSize()>0) {
		    		int idx =item.getName().lastIndexOf(File.separator); // 파일전체경로에서 이름만 빼오기
		    		filename = item.getName().substring(idx+1);
		    		File uploadedFile = new File(uppath+File.separator+filename); //위에까진 그냥 request에서 읽은거고 여기서 실제로 파일 생성
		    	    //파일 중복 체크
		    		if(uploadedFile.exists()) {
		    			filename = System.currentTimeMillis()+"_"+filename;
		    			uploadedFile = new File(uppath+File.separator+filename);
		    		}
		    		item.write(uploadedFile); //임시경로에서 실제경로로 파일쓰기(물론 동일한 경로임)
		    	}
		    }
		}
		
	}catch(Exception e) {
		e.printStackTrace();
	}	
		
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().print(filename);
		return null;
	}

}

 > 일반적으로 파일을 전달받으면, 임시저장소에 저장해두었다가, 실제 저장소로 옮기는 과정을 거친다.

      (임시저장소는 비워짐)

 > 이때 임시저장소와 실제 저장소를 동일하게 사용하는 방식을 자주 사용하는데, 위도 그와 같다.

 > File 객체나 Stream 생성시에는 절대경로를 사용해야한다. (request.getServletContext().getRealPath()사용)

> 경로구분자는 운영체제마다 다르므로, File.separator 사용

 

 

3. memberInsert 컨트롤러 수정 , DAO 메서드 추가

 

MemberVO vo=new MemberVO();
		
		if(request.getParameter("mode").equals("fadd")) {
			String filename = request.getParameter("filename");
			vo.setFilename(filename);
		}

		vo.setId(id);
		vo.setPass(pass);
		vo.setName(name);
		vo.setAge(age);
		vo.setEmail(email);
		vo.setPhone(phone);			
	    MemberDAO dao=new MemberDAO();
	    
	    int cnt=-1;
	   
	    if(request.getParameter("mode").equals("fadd")) {
	    	cnt = dao.memberInsertFile(vo);
	    }else {
	    cnt=dao.memberInsert(vo);
	    }

> memberInsert.do에 모드에 따라 filename을 VO에 포함하거나, filename을 저장할 수 있는 insert를 불러오도록 수정

> 이렇게 만들어두면 DAO는 memberInsert와 크게 다르지 않다.