728x90 반응형 SMALL Spring공부/3-파일업로드14 파일 formData와 String 서버에 보내기 / 파일 업로드 다른 정보도 같이 보내기 웹에서 파일을 서버로 보내는 방법과 파일 외에도 다른 정보를 서버로 보내는 방법 파일을 서버로 보내다 보면 이런저런 어노테이션과 그럴싸한 소스들을 붙이는데 이 포스팅은 담백하게 깔끔하게 진행하는 소스이다. 테스트 환경 내가 업로드할 파일 과학기술정보통신부공고 제2022-0980호_우주항공청설립추진단의 설치 및 운영에 관한 규정 제정안 행정예고.hwp JSP 소스 VIEW 우선 put, patch 방식은 그냥 넣어봤다. :: 조건 :: 1. $Ajax 를 사용할 것 2. 서버로 파일이 도달하는지만 확인할 것 3. 다른 조잡한 어노테이션 사용 X 4. 특별하게 METHOD 방식을 XML이나 Config파일을 수정하여 올리지 않기 Post 매서드를 이용한 @RequestParam(" ") MultipartF.. 2022. 12. 12. 파일업로드 마무리 게시글 등록 시 첨부파일 추가, 삭제 0 게시글 삭제 시 첨부파일과 데이터 삭제 0 게시글 수정 시 첨부파일과 데이터 변경 0 실제 구현화면 프로젝트 처리 1주일간의 짧은 레이싱이 끝났다. 3일은 첨부파일기능을 실습해보았고 나머지 3일은 내 기존 프로젝트에 적용시켜보았다. 난 마스터브랜치에서 새로 브랜치를 생성해서 업로드 파일기능구현을 시켰다. 이제 이것을 풀리퀘스트로 합쳐보겠다. 깃허브에서 풀리퀘스트 하는법 상단의 컴패어 및 풀리퀘스트를 눌러보자 그리고 해당 브랜치에 설명을 간략하게 넣는다. 첨부할게있으면 첨부해도좋다. 그럼 Create pull request를 눌러서 최종으로 진행하도록하자 커맨트를 남길게 있으면 남기고 커밋을 하자 머지 풀리퀘스트를 통해서 지금 뻗어나온 브랜지, 즉 가지를 다시 몸통.. 2021. 10. 15. 프로젝트(6)-잘못된 파일 처리 Ajax를 이용해서 첨부파일을 사용하면 사용자가 게시물을 등록하거나 수정하기 전에 이미 업로드 시킨 파일들을 볼 수 있다는 장점이 있지만, 다음과 같은 문제가 생긴다. - 첨부파일만을 등록하고 게시물을 등록하지 않을 떄의 문제 파일은 이미 서버에 업로드 되었지만, 게시물을 등록하지 않았으므로 의미 없이 파일들만 서버레 업로드된 상황 - 게시물을 수정할 때 파일을 삭제했지만 실제로 폴더에서 기존 파일은 삭제되지 않은 문제 데이터베이스에는 기존 파일이 삭제되었지만, 실제 폴더에는 남는 문제 이는 사용자가 Ajax로 어떤 작업을 한 후에 비정상적으로 브라우저를 종료하거나 페이지를 빠져나가는 문제이다. 이 문제를 해결하는 핵심은 정상적으로 사용자의 게시물에 첨부된 파일인지 아니면 사용자가 게시물을 수정할때 업로.. 2021. 10. 15. 프로젝트(5)-게시글 수정 및 기타작업 앞서 말한것과 같이 수정은 사실상 첨부파일의 등록 작업과 유사하다... 첨부파일이라는게 개념 자체가 수정이 아닌 기존 파일을 삭제하고, 새로운파일을 추가하고 등등 그러니 기존의 게시물등록과 비슷하게 작업을 해보자 그리고 해당 업로드할때 좀 이쁘장하게 나오도록 css파일을 따로 놓았다.. 프로젝트 막바지에는 js파일을 따로 또 분리해서 정리하겠다... 화면에서 첨부파일 수정 게시물의 조회화면과 유사하지만 첨부파일 데이터를 보여주면서 삭제가 되도록, 첨부가 되도록해야한다. 은근 까다로왔다 나에겐; 천천히 해보자 우선 modify.jsp 파일일부에 첨부파일 폼을 넣어준다 첨부파일을 수정하기 위해서 게시물을 등록할 때 사용했던 버튼과 파일을 교체하기 위한 이 필요하니 추가해준다. Files 126번 게시글을 지.. 2021. 10. 15. 프로젝트(4)-게시물 삭제 게시물을 삭제할 떄는 게시물이 포함된 첨부파일 역시 같이 삭제할 필요가있다. 단순히 DB상에서 삭제 뿐만아니라 실제 폴더 내의 파일도 같이 삭제되어야 한다. 첨부파일 삭제 처리 첨부파일과 관련된 SQL은 BoardAttachMapper 인터페이스와 XML파일에 작성되어있으니 이부분에 추가를 해주자 public void delete(String uuid); 삭제처리할 메서드이다. 그리고 실제 SQL은 XML매퍼에 작성한다. delete from tbl_attach where uuid = #{uuid} delete tbl_attach where bno = #{bno} 하나삭제와 종합삭제를 넣었다. 하나삭제는 기존에 있지만 종합삭제/전체삭제도 그아래 추가해주었다. BoardServiceImpl변경 BoardS.. 2021. 10. 15. 프로젝트(3)-게시물 조회 게시물의 조회에서는 첨부파일을 다운로드 하거나, 원본 이미지의 파일을 볼 수 있는 기능을 사용한다. 게시물의 조회에서 고민해야 하는 내용은 첨부파일을 한번에 볼것이닞, Ajax을 이용해서 별도로 처리할 것인지 결정해야한다. 게시물의 정보는 tbl_board 테이블에 기록되어있고, 첨부파일의 정보는 tbl_attach에 기록되어 있기때문에 화면에 두 테이블이 있는 정보를 사용하기 위해서는 다음과 같은 방식을 고려해야 한다. -BoardVO 객체를 가져올 때 join을 처리해서 한꺼번에 게시물과 첨부파일의 정보를 같이 처리하는 방식 DB를 한번만 호출 하게 되므로 효율적이지만 MyBatis쪽에서 처리해야 하는 일이 많아진다. -JSP에서 첨부파일의 정보를 AJax를 이용해서 처리하는 방식 다시 쿼리를 처리해.. 2021. 10. 15. 프로젝트(2)-등록화면처리 첨부파일 자체의 처리는 AJax를 통해서 이루어진다. 즉 게시물의 등록 시점에는 현재 서버에 업로드된 퍼일들에 정보를 등록하려는 게시물의 정보와 같이 전송된다. 이때 게시물의 등록버튼을 클릭했을때 현재 서버에 업로드된 파일의 정보를 으로 만들어서 한번에 전송하는 방식을 사용하겠다. 등록 화면인 http://localhost:8080/board/register 의 화면을 담당하는 register.jsp 파일에 첨부파일 업로드할 수 있도록 태그를 추가한다. File Attach 그럼 어렵지 않게 첨부파일을 놓을 수 있는 란이 생겼다. JS처리 복잡한 부분은 파일을 선택하거나 Submit Button을 클릭했을 때의 JS처리이다. 가장 먼저 Submit Button을 클릭했을때 첨부파일 관련된 처리를 할 수 .. 2021. 10. 14. 프로젝트(1)-첨부파일등록 이제 내가 그동안 작업해왔던 프로젝트에 첨부파일기능을 탑재할 차례이다. 첨부파일 정보를 위한 준비 첨부파일이 게시말과 합쳐지면 가장 먼저 진행해야 하는 일은 게시물과 첨부파일의 관계를 저장하는 테이블이 있어야한다. 게시물의 첨부파일은 각자 고유한 UUID를 가지고 있기 때문에 별도의 PK를 지정할 필요는 없지만, 게시물의 등록할 때 첨부파일의 테이블 역시 같이 insert 작업이 진행되어야 하므로 트랜잭션 처리가 필요하다. 첨부파일을 보관하는 테이블은 tbl_attack로 설계한다. tbl_board는 tbl_reply와 이미 외래키의 관계를 가지고 있으므로 첨부파일이 추가되면 아래와 같은 구조가 된다. create table tbl_attach ( uuid varchar2(500) not null, u.. 2021. 10. 14. 파일업로드(6)-첨부파일삭제 첨부파일 삭제 첨부파일 삭제는 생각보다 많은 고민을 해야한다. 1. 이미지 파일의 경우에는 썸네일까지 같이 삭제되어야 한다. 2. 파일을 삭제한 후에는 브라우저에서도 썸네일이나 파일 아이콘이 삭제되도록 처리해야한다. 3. 비정상적으로 브라우저의 종료 시 업로드된 파일의 처리 우선은 일반 파일과 이미지 파일의 삭제에 대해 다뤄보겠다. 업로드된 첨부파일 삭제는 Ajax를 이용하거나 태그를 이용하는 방식 모두를 적용 할 수 있다. 이미 업로드된 첨부파일의 삭제는 일반파일의 경우에는 업로드된 파일만을 삭제하면 되지만, 이미지의 경우 썸네일과 파일과 원본파일을 같이 삭제해주어야 한다. 서버 측에서는 삭제하려는 파일의 화장자를 검사해서 일반 파일인지 이미지 파일인지를 파악하거나, 파라미터로 파일의 종류를 파악하고,.. 2021. 10. 14. 파일업로드(5)-원본 이미지 보여주기 일반 첨부파일과 달리 썸네일이 보여지는 이미지 파일의 경우 썸네일을 클리하면 원본 이미지를 볼 수 있게 한다. 썸네일의 이미지가 업로드 된 경로 + /thumb + UUID 파일이름이었다면, 원본 이미지의 이름은 중간에 /thumb_ 가 /로 순수하게 바뀌는 점이 달라진다. 원본 이미지를 화면에서 보기위해서는 태그를 생성하고 해당 에 이미지 태그를 작성해서 넣어주는 작업과 이를 화면상에서 절대 위치를 이용해서 보여주어야 한다. 원본 이미지를 보여줄 처리 이미지의 겨우 일반 파일과 달리 이미 이미지 파일 데이터는 썸네일과 동일한 방식으로 처리 될 수 있기에 사실상 핵심적인 부분은 이미지를 보여주는 를 처리하는 부분이다. 썸네일을 클릭할때 이루어지도록 JS함수를 작성한다. function showImage(.. 2021. 10. 14. 파일업로드(4)-첨부파일의 다운로드 첨부파일의 업로드가 처리되는 과정도 복잡하지만, 이를 사용자가 사용하는 과정 역시 신경 써야한다. 브라우저에 보이는 첨부파일은 1. 이미지 종류, 2. 일반파일 로 구분되므로 사용자의 첨부파일관련된 행위도 종류에 따라 다르게 처리 되어야 한다. 만약 이미지인 경우에는 썸넬 이미지를 클릭했을 때 화면에 크게 원본 파일을 보여주는 형태로 처리되어야 한다. 이 경우 브라우저에서 새로운태그를 생성해서 처리하는 방식을 이용한다. 이걸 light-box라고 한다. light-box는 제이쿼리를 이용하는 많은 플로그인들이 있다. 이를 이용하거나 직접 구현할 수있다. 한번 직접 구현해보겠다. 첨부파일이 이미지가 아닌 경우 , 기본값은 다운로드로 설정하겠다. 첨부파일의 다운로드 이미지를 처리하기 전 간단한 첨부파일의 다.. 2021. 10. 13. 파일업로드(3)-업로드데이터변환 첨부파일 데이터의 업로드가 완료되었지만, 아직도 많은 작업이 남아있다... Ajax로 파일을 업로드해도 아직 브라우저 쪽에서 아무런 데이터도 전달하지 않았기 때문에 브라우저는 과 같은 오류만나오고 응답을 얻을 수 가 없다. 또는 파일을 올려놓아도 와같은 간단한 형식으로 "아 첨부가 되긴했구나"까지만 알뿐이다. 이것을 시각적으로나 정보를 포함시켜야한다. 그렇다면 브라우저로 전송해야하는 데이터는 어느것이 있을까? 1. 업로드 된 파일의 이름과 원본 파일의 이름 2. 파일이 저장된 경로 3. 업로드된 파일이 이미지인지 아닌지에 대한 정보 이에 대한 정보를 처리하는 방법은 1. 업로드된 경로가 포함된 파일이름을 반환하는 방식 2. 별도의 객체를 생성해서 처리하는 방법 이렇게 2가지가 있다. 1번의 방식은 브라우.. 2021. 10. 13. 이전 1 2 다음 728x90 반응형 LIST
