본문 바로가기

Dev-

Ajax를 이용한 파일 처리-5. Ajax를 이용한 파일 처리-1. Ajax를 이용한 파일 처리-2. Ajax를 이용한 파일 처리-3. Ajax를 이용한 파일 처리-4. 삭제처리를 해봅니다. 두가지 기능을 구현해야 합니다. 앞의 과정과 거의 유사하게 진행하면 됩니다~ 1. 해당 디렉토리에 있는 실제 파일을 삭제한다. 2. 페이지에서 해당 영역을 삭제한다. [uploadAjax.jsp] [UploadController.java]
Ajax를 이용한 파일 처리-4. Ajax를 이용한 파일 처리-1. Ajax를 이용한 파일 처리-2. Ajax를 이용한 파일 처리-3. 지난 포스트까지의 내용을 요약하자면,, 1. 특정 블록에 올려진 파일을 컴퓨터 내 디렉토리에 파일을 저장하고, 2. 일련의 규칙을 통해 정해진 파일명을 Http 상태 코드와 함께 클라이언트에게 리턴해줍니다. 그러면, 이제는 이렇게 비동기적으로 돌려받은 데이터를 화면에 띄워야 하겠죠. 이미지 파일일 경우) 썸네일 이미지를 표시한 후, 원본 파일을 조회하는 링크를 달아줍니다. 그 외 파일일 경우) 정리된 파일명을 표시하고, 다운로드 링크를 달아줍니다. 우선 "POST" 요청에 대한 응답으로 받은 파일명을 뷰 페이지에서 다루어봅시다. [uploadAjax.jsp] 위 코드를 보시면,, 이미지를 가져올 때 소스..
Ajax를 이용한 파일 처리-3. Ajax를 이용한 파일 처리-1. Ajax를 이용한 파일 처리-2. 첨부파일 기능이 다소 복잡하네요.. 절반정도 진행했는데 코드 양이 상당합니다. 지난 포스트에서는, 임의의 Drop 블록을 만들고 파일을 블록에 올렸을 때 1. 기본 이벤트를 취소 2. FormData에 "file" 키의 값으로 file 객체(Drop 블록에 올라온 파일)를 담아 "POST" 방식으로 요청하였습니다. [UploadController.java] 그렇다면 UploadFileUtils 클래스에 대해 알아봅시다. UploadFileUtils는 5개의 메서드를 포함하고 있습니다. 1. uploadFiles(String uploadPath, String orginalName, byte[] fileData) - 고유 파일명 세팅("uu..
Ajax를 이용한 파일 처리-2. Ajax를 이용한 파일 처리-1. 포스트에 이어 진행하겠습니다. fileDrop 클래스의 "drop" 이벤트 처리를 해줍니다. POST 방식으로 서버에 보내기 위해 FormData 객체를 만들어 파일을 담아줍니다. 주의할 점이 있습니다. 1. processData:false : 기본값은 true로, 데이터를 "application/x-www-form-urlenceded" 타입으로 전송합니다. -> 다른 형식으로 전송하기 위해 false로 지정합니다. 2. contentType:false : 기본값은 "application/x-www-form-urlenceded" -> 파일의 경우 "multipart/form-data"방식으로 전송하기 위해 false로 지정합니다. [참고: 코드로 배우는 스프링 웹 프로젝트]
Ajax를 이용한 파일 처리-1. 파일 업로드 방식에는,, 을 사용하는 방법과 Ajax를 사용하는 방법이 있습니다. - 을 사용하는 방법이란,,, form으로 파일을 서버로 보낼 때, 화면전환이 필히 일어나는데, 이를 막기 위해 동일 화면에 이라는 영역을 두어 java srcipt로 화면 전환을 막아주는 방법을 말합니다. 디자인 요소가 섞일 수 있어서,, 유지보수가 매~우 힘들다고 합니다. 검색결과,,, 호불호가 갈리는 것이 아니라, 대부분 사용은 지양하는 듯 하네요. - Ajax를 이용한 방법은 화면에 임의의 블럭을 두어, 파일을 끌어다 놓으면 업로드 하는 방식을 말합니다. 모든 기본적인 페이지 영역에 임의의 파일을 끌어다 놓으면, 그 파일이 새창으로 열립니다. 따라서, 이 이벤트를 막아주고, 그 파일의 정보만 불러오는 것이 시작입니다..
Handlebars - 반복적인 부분을 출력하고 싶을 때, 코드를 깔끔하게 목록 형태의 데이터를 받았을 때,,HTML 태그를 포함해, 데이터를 반복적으로 표시해야하는 경우가 있습니다. 예로, DB로부터 List 데이터를 받아 목록 형태로 만들고 싶을 때가 있죠.순수 java script, jQuery만 사용하면,, 코드가 지저분해지기 쉬운데요. 코드를 한번 깔끔하게 만들어봅시다. 위 코드에서 id가 replies인 ul 태그 안에 넣어보겠습니다. 현재는 간단한 상황을 예로 든 것이라 괜찮지만,출력할 정보가 많아질수록 가독성이 떨어지고 지저분한 코드가 만들어집니다. 이를 조금 보완하기 위해,, jQuery에서 템플릿을 제공하는데요,제일 많이 쓰이는 Mustache를 기반으로 작성된 Handlebars 템플릿을 사용해보겠습니다. 템플릿이라는 말 그대로, 공장에서 제품을 생산해내는 ..
jQuery 이벤트 위임 현재 존재하는 자손요소뿐만 아니라 나중에(동적으로) 추가될 자손요소에게 이벤트를 위임을 할 수 있습니다.추가될 자손요소의 수가 적다면 일일이 이벤트 처리를 할 수 있지만,,, 그 수가 크고, 정확히 알 수가 없다면 곤란해집니다. 가령.. 새로 추가될 자손요소가 li > a 태그이고, 그 모든 자손요소에 "click"시 alert(11)이라는 함수를 발생시키고 싶다면 아래와 같이 적용할 수 있습니다. 하지만 아래와 같이 한다면, 에러가 뜹니다. 추가로,,,자손 요소가 들어가는 부분은,, 꼭 이벤트를 최종으로 받는 요소일 필요는 없습니다.
Ajax의 Content-Type .ajax로 서버에 데이터를 보낼때, header 중 Content-Type 이 존재하는데 이를 설정하지 않았을 땐 default 값으로 application/x-www-form-urlencoded; charset=UTF-8 타입으로 지정됩니다. 따라서 json 형태의 데이터를 주고 싶을 땐, header:{"Content-Type":"application/json"} 을 지정해 주어야 합니다. 그런데 여기서 또 한가지 문제점이 발생하는데, request 안에 포함된 json 형태의 데이터를 받았을 때, 이것을 보통 VO(혹은 DTO)에 다시 담아 사용하는데,, .ajax는 데이터를 문자열화 해주지 않기 때문에 보낼 데이터를 JSON.stringify()로 감싸주어야 합니다. 그렇지 않을 시,, json..

티스토리툴바