파일업로드를 비동기형식으로 처리하는 방법
1) 사용자가 요청을 보낼수있는 화면에는 text와 type형식이 file인 input태그가 button태그로 구성
-form태그를 사용하지않는이유는 action태그로화면전환없이 ajax를 사용하기위해서이다.
2) form에 click 이벤트할당
2-1) session의 id값, file과 text의 value를 각각 writer,file,content변수에 받는다 (중요한건 파일이다)
2-1) file.lastIndexOf(".",file.length)+1, file.length를 통해 확장자명을 얻는다
- 파일의 값중 "."이후에 확장자명이 있기때문에 "."후부터 끝까지 값을 잘라 저장하려고한다
-lastIndexOf("찾을값",시작인덱스) 이렇게하면 indexOf는 앞에서부터 lastIndexOf는 뒤에서부터 "."을 찾는다
-확장자명에는 "."이 없다는점을 이용해 항상 확장자명과 파일의경계가되는 "."을 찾아낼수있다
-해당"."의 index를 구한후 slic(구한값+1,파일길이(자를구간 마지막번째) ) 를사용해 확장자명 획득
3) if문을 통하여 원하는형식의 확장자가아닌경우를 걸러낸다
4) var formData = new FormData() 를통해 formData를 생성한다
- window.formData객체는 사진을 업로드할때 자주사용된다 append를 사용하면 key,값의 JSON형태로 값이담겨진다
5) 객체가가진 함수중 append를 사용해 키와 값형태로 content와 $("#file")[0].files[0] 을 추가한다
5-1) $("#file")[0].files[0]는 파일이름인데 files의 값은 console.dir에서 확인할수있었다
6)$.ajax({})을 사용하여 post형식으로 formData를 실어 비동기형식을 사용한다
7)컨트롤러는 요청을 맵핑후 content,<MultipartFile>file,session 전달받는다
--신기한것이 난 formData로보냈는데 content,file을 따로받았다
7-1) session을통해 userVO를 받는다
7-2) Date로 날짜를생성후 SimpleDateFormat으로 값을 포맷한후 그값을 폴더의 생성이름으로사용한다
7-3)File folder = File( 경로값담은 상수+"\\"+임의로생성한폴더이름); 를 생성 // 폴더를 생성할위치
7-4) if( !folder.exists()) folder.mkdir(); 해당위치에 해당이름의폴더가없다면 폴더생성
7-5) String fileRealName = file.getOriginalFilename(); 파일의 원본이름을 얻는다
7-6) Long size = file.getSize() 파일의길이를얻는다
7-7) String uploadPath = folder.fetPath(); //폴더를 포함한 경로를 얻는다
7-8) 원본이름.substring(원본이름객체.lastIndesOf("."), 원본이름객체.length)로 ".확장자"를 가져온다
-slice를 쓰던 .이있던없던 subString을쓰던 원하는값을 가져오는것에 초점을맞추면된다
7-9) UUID uuod = UUID.randonUUID();
7-10) UUID uuids = uuid.toString().replaceAll("-","");
--해당 메서드로 가짜파일명을 만든다 이파일명은 흔히봐왔던것이며 중복값이 생성되지않는다.
8) File saveFile = new File(폴더경로 + "\\" + 파일명);
8-1) file.transferTo(saveFile);
--받아온 file이라는객체에는 file값이담겨있고 그파일을 해당경로변수로 전송시켜주겠다는 의미이다.
9) 준비한 vo객체에 요청받은 값들을 필요한것만 전부담는다 ex) 경로,글,작성자,파일이름,파일원본
10)Service를 이용해 vo를 전달받고 반환값을통해 결과를 ajax요청한곳으로 반환시켜준다
끝이며
헷갈렸던 Service Mapper에 간략하게 적고간다
1.서비스 인터페이스 생성
2.서비스 클래스 생성후 서비스인터페이스 시행
3)맵퍼에 인터페이스랑 함수구현
4)sqlmap폴더에 xml파일 생성 상단에 맵퍼사용가능한 코드주입
4-1)<mapper namespace = "맵퍼경로"> 주입
4-2) sql문작성
5) controller에서 serviceImp 클래스를 생성해
@Autowired ,@Qualifer("@@Service") 사용후 private 로 자동주입된 서비스객체생성
6)serviceImp 클래스에는 클래스에 @Service("@@Service")생성
--컨트롤러에서 bean으로 쓰기위해
7)servieImp 클래스는 @Autowired를 통해 mapper를 생성해 vo를 전달하고
8)mapper는 xml에서 다설정을했으니 vo값을 받기만하면 된다.
정확하지않고 가독성도떨어지지만 흐름대로 읽었다