메뉴 건너뛰기

조회 수 7343 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
ajax로 개발을 하다보면 파일업로드도 비동기로 처리하고 싶을때가 있는데
작년에 내가 비동기 처리를 하기 위해 검색의 검색의 검색을 해보아도 한국어으로 된 예제나 샘플을
찾아 볼수 없었다. 그래서 해외사이트를 두루두루 돌아다닌결과 처리 할 수 있는 방법을 찾았는데
맨날 공개한다. 공개한다. 미루다가 이제와서 샘플과 함께 소스도 공개한다.

그럼 비동기 파일전송을 하기 위해선 어떻게 해야할까?
일단 페이지 리로드가 없이는 서버쪽 페이지를 호출할수 없기에 이론상으론 불가능하다.
하지만 우린 ajax라는 기술로 페이지의 리로딩이 없이 서버쪽 페이지를 호출하기 시작했다.
(ajax에 관해 무슨말인지 모른다면 태요님이 설명한 글을 읽어보면 도움이 됩니다. 클릭)
하지만 ajax를 기술을 이용해도 파일전송이 쉽지 않았으니... ajax전문가인 친구녀셕에서 물어보았더니
iframe으로 처리해야 가능하다라는 결론, 그리고 나서 이리저리 수소문 끝에 제이쿼리 플러그인중에 하나인
jquery.form을 이용해서 파일전송이 가능하다는 샘플을 찾았다. (회사 과장님이 해외포럼에서 찾아주셨음)

결국 플러그인의 소스를 뒤지고 뒤지고 보니 내부적으로 iframe을 생성해서 사용한다는 것을 확인 할 수 있었는데
우린 그냥 이 플러그인을 이용해서 iframe을 만들어 처리할 필요없이 아주~~ 간단하게 사용할수 있다는 것이다.


                                              (jquery.form.js 파일 일부)

비동기 파일전송 소스는 매우 간단하다.



일단 ready()함수에 해당 문구를 넣어줘야 하는데 ajaxForm();안에 있는 FileuploadCallback는
파일업로드가 완료되고 나서 즉 서버쪽 페이지를 호출하고 나서 실행된 콜백 메소드라고 생각하면 된다.
그리고 하단의 submit()안에 return false를 해줘야 현재 페이지의 변화가 없다.
고로 frmFile이란 폼의 action값을 내부적으로 만든 iframe에서 처리하고 밖에 페이지는 페이지 변화가 없기 위해
retun false를 했다고 볼수 있다. (파일전송과 동시에 다른 작업을 하고 싶다면 이곳에 다른 명령어나 함수를 넣어도 된다.)

그럼 콜백 메소드를 확인해보자



사실 별거 없다. 결과값이 error이면 에러메세지를 보여주는게 끝이다. 간단한 예제라 이렇지만
실제 서비스에선 이쪽 콜백메소드에서 처리할게 많아 진다.

다음은 실제 전송하는 부분



그냥 submit() 하는게 다다. 하지만 제이쿼리 폼을 이용했기 때문에 내부적으로 생성된 iframe에서
ajax_fileupload.asp의 파일이 처리되고 처리가 완료되면 콜백메소드가 실행될 것 이다.

아래는 실행결과다.




아주 간단하다. ajax_fileupload.asp 안에 소스는 각각의 입맛에 맞게 ABCUploadDextUpload같은
컴포넌트를 이용해서 처리하면 된다.

샘플파일: upload.zip


설마 아직까지 웹페이지를 개발하면서 제이쿼리를 안쓰고 있다면 다시 이런 생각을 한번 해보았으면 한다.

1. 포크가 있는데 손으로 음식을 먹고 있습니까?
2. 핸드폰이 있는데 삐삐를 가지고 다니나요?
3. 초고속 인터넷이 있는데 모뎀을 이용하나요?


List of Articles
번호 제목 날짜 조회 수
79 [jQuery] 확인 창(confirm), 페이지 이동(location.replace) 2018.09.06 2647
78 드래그 & 드랍 구현 - on()[이벤트리스너] file 2018.09.06 2888
77 외부 파일 드래그 드롭 구현 file 2018.09.06 1678
76 페이지 이동 제어 - href, replace, pushState() 2018.09.06 2620
75 입력폼에 입력되는 값의 유효성 체크하기 두번째 file 2018.09.06 1835
74 jQuery 폼 입력값 체크 예제 2018.09.06 2092
73 jquery - select option 선택값 가져오기 2018.09.06 5330
72 jQuery selectBox 컨트롤. 2018.07.25 2558
71 jQuery 유효성 검사 2018.07.04 3362
70 jquery 체크박스 배열 처리. 변수 하나에 담기. 2018.07.04 4657
69 jquery css div, li 리스트 선택한 메뉴 변경 출처: http://okkks.tistory.com/1062 [이건없지] file 2017.07.05 5794
68 jquery를 활용한 입력폼 초기화하기 2017.03.27 8702
67 Ajax 파일 업로드 샘플 코드 2017.03.11 7791
66 파일 업로드 방법, 이미지 파일 업로드 예제 소스 2017.03.06 9028
» 예제로 만나보는 제이쿼리 - 비동기 파일업로드 file 2017.03.06 7343
64 jQuery 입문: form 데이터 유효성 검사 2017.03.02 11799
63 jQuery 실행패턴 2017.03.02 6681
62 jquery 이용한 필수입력체크(input form) 2017.03.02 10557
61 검토하기: jQuery를 이용하여 form 처리하기 2017.03.02 7511
60 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기 2016.12.22 10481
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved