Iframe 을 이용한 Ajax FileUpload 의 원리.

오랜만에 인터넷에 글을 끄적거리기로 마음 먹었다. 최근에 알게 된, Iframe을 이용한 Ajax 방식의 Fileupload의 원리 에 관하여...

웹 페이지에서 서버에 파일을 올리기 위해서는 HTML의 <Input> 을 사용한다.

 

<input type="file" />

 

File 타입의 <Input> 은 "Browse" 버튼을 눌러 사용자가 직접 파일을 선택하여 값을 설정할 수 있다. 보안상의 이유로 해당 값은 인위적으로(Javascript 등에 의하여, ) 변경이 불가능 하다. 사용자의 passwd 파일과 같은 곳의 경로를 임의로 설정하여 업로드 할 수 있는 막강한(?) 기능을 자제 시키기 위함이다.

그리고, 그 File 을 업로드 할 수 있는 방법은 해당 Input 을 둘러 싸고 있는 Form을 이용하는 것이다. Form에는 Action과 Method 그리고 Target 과 같은 정보가 있다.(물론 더 있지만 궁금하면 HTML Spec 문서를 찾아보자) Form의 내용을 Method에 정의한 방법으로 Action에 정의된 주소로 요청을 날려버리는 것이다. 여기 까지는 내가 알고 있던 부분!! 문제는 Target 이였다. 이 Target이라는 속성이 있기에 Ajax방식이 가능해 졌다.

Form의 Target 속성은 서버에 요청을 날려버린 후, 서버에서 받은 내용을 표시할 window 객체의 name을 적는 곳이다. Target 속성이 정의 되어 있지 않다면 현재 페이지가 새로 고침 되어 버린다. 기존의 내용은 Ajax방식과 함께 날라가 버리는 것이다.^^;

그렇담, 현재 페이지가 아닌 window 객체는 어떻게 만들까? 바로 Iframe이다! (물론, window.open() 과 같은 방법도 있지만..)

결론은 이렇다!! Form 의 submit() 을 호출하면, Action 주소로 요청이 가고, 리턴 결과(XML)는 Target의 정의되어 있는 window의 페이지 내용이 된다는 것, 그럼, 해당 "window.getElementXXX()"를 이용해서 결과 값을 처리 할 수 있다는 사실!!

그로써, 현재 페이지는 아무런 변화 없이 파일도 서버로 올리고, 결과 도 얻을 수 있게 되는 것이다.