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_..

ajax 사용해서 첨부파일을 삭제하는 작업을 하고있는데 오류가 떳다. 지금 내가 작업하는 기준으로 targetFile 변수가 정의되지 않았다는 것을 알려주고 있는데 이런 오류가 왜 나타나냐면 1. 변수를 참조하는 코드가 해당 변수를 정의한 코드 범위 내에서 실행이 안되거나 2. 변수가 정의되지 않은 상태에서 참조하고 있기 때문. 인데 내가 해당되는건 1번이엇다. 보통 이런 오류는 변수의 스코프 문제로 발생하는데 이를 해결하려면 변수가 정의된 범위 내에서 참조를 해야함. 이벤트 핸들러 함수 내에서 정의된 변수는 해당 함수 내에서만 유효해서 외부에서는 참조할 수 없기때문. 오류가 났던 코드는 $(".uploadResult").on("click", "button", function(e){ console.log..

첨부파일을 삭제하는 작업은 단순 파일 하나만 삭제하는게 아니라 고려해야하는 점이 있음. 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..

옛날에는 IE나 Edge같은 경우는 Content-Disposition 값을 처리하는 방식이 달라서 한글이 제대로 안나왔다고 한다. IE 10 까지만 해도 request 의 header 에 User-Agent 부분을 읽어서 처리하고, Edge같은 경우는 Trident(엔진) 기준으로 따로따로 처리를 했다고 하는데 지금은 IE11부터는 MSIE가 사라졌다고한다. 그럼 이건 둘째 치고 Edge같은 경우는 호환문제로 크롬이랑 같은 엔진을 쓰고 있어서 그럼 어떤 방식으로 구분을 해봐야할까 하는 생각이 들었는데 천천히 고민해봐야 할거같다. 결국 HttpServletRequest에 포함된 헤더에 정보들을 이용해서 구분하는거 같은데 나중에 한번 생각을 많이 해봐야할듯. 엔진 기준으로 봐야하는지 아니면 브라우저의 이름..

첨부파일의 다운로드는 서버에서 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..