Ajax Toolkit 을 이용한 실시간 (페이지 전환없이) 파일업로드 구현하기

Ajax Toolkit 을 이용한 실시간 (페이지 전환없이) 파일업로드 구현하기

 

 

최신버전 아작스 툴킷(http://www.asp.net/ajax/)을 다운받습니다

 

 

화면구성부분

 

페이지에 ScriptManager 와  AsyncFileUpload 를 끌어놓습니다.

AsyncFileUpload를 아래와 같이 구성합니다.

 

Onclientuploadstarted 등을 설정하면각각의 상태에 맞는 자바스크립트가 실행됩니다.

<script>

 

function alertMsg() {

 

alert("파일 업로드시작 ");

}

</script>

 

 

 

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

&nbsp;<table class="style1">

<tr>

<td class="style2">

<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" ThrobberID="Image1"

onuploadedcomplete="AsyncFileUpload1_UploadedComplete1" />

</td>

<td>

<asp:Image ID="Image1" runat="server" ImageUrl="ajax-loader.gif" />

</td>

</tr>

</table>

<br />

<br />

</ContentTemplate>

</asp:UpdatePanel>

ThrobberID를 설정하면 업로드중에서는 이미지가 노출되고 완료되면 사라집니다. (업로드 상태표시)

 

 

비하인드 소스부분

파일을 셀렉트하고 나면 파일업로드를 진행해줍니다.

protected void AsyncFileUpload1_UploadedComplete1(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)

{

System.Threading.Thread.Sleep(5000);

string savePath = MapPath("~/FileUpload/") + Path.GetFileName(e.filename); 

AsyncFileUpload1.SaveAs(savePath); //실질적인 파일업로드

}

 

 

 

실행화면

파일첨부를 하면 찾아보기 옆에 보시면 로딩이미지가 실행되고 있습니다

완료가 되면..

완료상태는 알수 있으므로 완료표시라든지 해주면 더 깔끔~