Ajax Toolkit 을 이용한 실시간 (페이지 전환없이) 파일업로드 구현하기
최신버전 아작스 툴킷(http://www.asp.net/ajax/)을 다운받습니다
화면구성부분
페이지에 ScriptManager 와 AsyncFileUpload 를 끌어놓습니다.
AsyncFileUpload를 아래와 같이 구성합니다.
Onclientuploadstarted 등을 설정하면각각의 상태에 맞는 자바스크립트가 실행됩니다.
<script>
function alertMsg() {
alert("파일 업로드시작 ");
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<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); //실질적인 파일업로드
}
실행화면
파일첨부를 하면 찾아보기 옆에 보시면 로딩이미지가 실행되고 있습니다
완료가 되면..
완료상태는 알수 있으므로 완료표시라든지 해주면 더 깔끔~