파일업로드 : jQuery + Uploadify + ASP.NET

이번 아티클에서는 jQuery에서의 파일업로드 기능을 구현하는 유용한 플러그인 중 하나인 Uploadify 컨트롤 사용법에 대해서 알아보도록 한다.

jQuery에서 파일업로드를 진행하려고할 때, Uploadify라는 컨트롤이 유용하게 사용될 수 있는 jQuery 플러그인이다.

이때, Uploadify 공식 사이트인 http://www.uploadify.com/ 의 샘플 코드를 살펴보면,

ASP.NET이 아닌 PHP 기반으로 소스가 만들어져 있다. 이를 아래 단계를 거쳐서 ASP.NET에서 사용할 수 있는 코드로 옮겨보았다.

uploadify 관련 소스는 위 사이트에서 다운로드받으면 된다.

 

우선, 처음으로 Visual Studio에서의 폴더 구성은 아래와 같이 설정하였다.

파일이 업로드되는 폴더는 웹 사이트의 루트에 Uploads라는 폴더를 하나두고, 이곳에 NTFS 파일시스템에 쓰기 권한을 부여하였다.

 

그림1. Uploadify 사용을 위한 폴더 및 파일 구성

 

두번째로, 파일업로드를 처리하기 위한 서버측 스크립트 코드를 아래와 같이 제네릭 처리기를 통해서 설정해 보았다.

넘겨온 파일을 지정된 폴더에 저장하는 로직이 전부이다. 추가로 작업을 하려면, 파일명 중복 처리를 해주면 좋겠다. (현재 코드는 이전 파일을 덮어쓴다.)

그림2. 파일업로드를 위한 Uploadify.ashx 파일

 

세번째로, Uploadify.htm 파일을 만들고, jQuery관련해서 아래와 같이 2개의 스크립트 파일을 인클루드한다.

이 모든 파일은 다운로드 받은 Uploadify 소스에 들어있다.

기타 소스에 대한 설명은 아래 주석을 활용한다. 

 

마지막으로 Uploadify.htm 파일을 웹 브라우저로 실행시켜 Browse 버튼을 눌러 파일을 선택하고, 업로드 버튼을 누르면 지정된 폴더인 Uploads 폴더에 파일이 저장됨을 알 수 있다. 

이상~

출처 : http://www.dotnetkorea.com/website/Home/tabid/36/EntryId/54/-jQuery-Uploadify-ASP-NET.aspx#AddComment