yahayaha

게시물을 조회할 때 첨부파일을 Ajax로 처리하기로 했으면 우선 서버측에서 JSON 데이터를 만들어서 화면에 올바르게 전송해야함. 이미 findByBno() 메서드가 완성되어있는 상태여서 sevice와 seviceImpl의 클래스를 수정해야함. public List getAttachList(Long bno); @Override public List getAttachList(Long bno) { log.info("GET ATTACH list by bno : " + bno); return attachMapper.findByBno(bno); } 이제 Controller는 특정한 게시물 번호를 이용해서 첨부파일과 관련 데이터를 JOSN으로 반환하도록 처리 @GetMapping(value = "/getAttach..

첨부파일이 게시물과 합쳐지면 게시물과 첨부파일의 관계를 저장하는 테이블의 설계를 먼저 해야함. 게시물의 첨부파일은 각각 고유한 UUID를 사지고 있기 때문에 별도의 PK를 지정할 필요가 없음. 게시물을 등록할 때 첨부파일 테이블도 insert 작업이 진행되어야 하므로 트랜잭션 처리가 필요함. 첨부파일 보관 테이블을 설계해야함. create table tbl_attach( uuid varchar2(100) not null, uploadPath varchar2(2000) not null, fileName varchar2(100) not null, filetype char(1) default 'I', bno number(10,0) ); alter table tbl_attach add constraint pk_..

첨부파일을 삭제하는 작업은 단순 파일 하나만 삭제하는게 아니라 고려해야하는 점이 있음. 1. 이미지 파일은 썸네일까지 같이 삭제 2. 파일을 삭제한 후에는 브라우저에서도 썸네일이나 파일 아이콘이 삭제 처리가 되어야함. 3. 비정상적으로 브라우저 종료시 업로드된 파일의 처리. 업로드된 파일의 삭제는 Ajax를 이용하거나 form 태그를 이용하는 방식 모두를 적용할 수 있음. 하지만 이미 업로드된 파일의 삭제는 일반 파일의 경우 업로드된 파일만 삭제하면 되는데, 이미지 경우 생성된 썸네일이랑 원본까지 삭제를 해야하는걸 인지해야함. 서버에서는 파일의 확장자를 검사하고 일반 파일인지 이미지 파일인지 파악하거나 파라미터로 파일의 종류를 파악해서 처리를 함. 일단 화면에서 삭제 기능을 구현하기 위해 uploadAj..

다운로드 자체 처리는 완료가 되었음. 그러면 이제 /uploadAjax 화면에서 업로드된 후 파일 이미지를 클릭한 경우 다운로드 될 수 있도록 처리. 이미지 파일인 경우는 이미지가 썸네일로 보여야하고 이미지가 아니면 첨부파일 아이콘이 보이게 해야함. 그에 대한 javascript 처리를 uploadAjax.jsp 에 진행. function showUploadFile(uploadResultArr){ var str = ""; $(uploadResultArr).each(function(i, obj){ if(!obj.image){ var fileCallPath = encodeURIComponent( obj.uploadPath+"/"+obj.uuid+"_"+obj.fileName); str += "" +""+ob..

첨부파일의 다운로드는 서버에서 MIME 타입을 다운로드 타입으로 지정하고, 적절한 헤더 메시지를 통해서 다운로드 이름을 지정하게 처리함. 다운로드는 MIME 타입이 고정되기 떄문에 메서드를 작성해줘야함. @GetMapping(value ="/download", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE) @ResponseBody public ResponseEntity downloadFile(String fileName){ log.info("다운로드 파일 : " + fileName); FileSystemResource resource = new FileSystemResource("C:\\upload\\" + fileName); log.info("resour..

업로드 결과가 JSON 객체로 반환되었다면 업로드 후에 업로드 부분을 초기화 시키는 작업과 결과 데이터를 이용해서 화면에 썸네일이나 파일 이미지를 보여줘야함. 업로드가 끝난 후 초기화 시켜주는 작업과 업로드된 결과를 화면에 반영해줘야함. 은 다른 DOM 요소들과 조금 다르게 readonly라 안쪽 내용을 수정할 수 없기 때문에 별도의 방법으로 초기화를 시켜 또 다른 파일을 추가하도록 만들어야함. $(document).ready(function(){ var cloneObj = $(".uploadDiv").clone(); $("#uploadBtn").on("click", function(e){ ................. } $.ajax({ url: '/uploadAjaxAction', processDa..

지금까지 완료된 작업은 이미지 경로에 대한 처리, 그리고 중복 이름에 대한 처리를 완료한 상태. 이제 남은건 이게 이미지 파일인지 일반 파일인지 구분을 해야함. 이미지 파일 같은 경우에는 화면에 보여지는 이미지(썸네일 섬네일)를 생성하는 작업을 해야함. 섬네일이지만 그냥 썸네일이 입에 착 달라붙으니 썸네일이라 하겠음. 썸네일을 제작하는 방법으로 여러가지가 있는데 JDK1.4부터는 ImageIO를 제공하기 때문에 이를 이용해서 원본 이미지를 줄일 수도 있고, 별도의 라이브러리를 이용하는 방식도 있음. JDK에 포함된 API를 이용하는 방식보다 별도의 라이브러리를 사용하는 경우가 많음. 그 이유는 이미지를 축소했을 때의 크기나 해상도를 직접 조절한느 작업을 줄이기 위함. 그럼 썸네일 이미지를 작업하기위해 m..

커뮤니티나 포털에서 특정 확장자를 제외한 파일의 업로드를 제한하는 경우가 많음. 이유는 파일업로드 취약점을 이용한 웹셀 공격을 조치하기 위함. 일단 exe, sh, zip 확장자와 특정 크기 이상의 파일은 업로드할 수 없도록 javascript로 처리 예정. 파일 확장자의 경우 정규식을 이용해서 검사를 실행. 먼저 uploadAjax.jsp에 javascript 코드 추가. $(document).ready(function(){ var regex = new RegExp("(.*?)\.(exe|sh|zip|alz)$"); var maxSize = 5242880; //5MB function checkExtenstion(fileName, fileSize){ if(fileSize >= maxSize){ alert..