asp.net jQuery Multiple File Upload Plugin 멀티업로드를 편하게

jquery 플러그인중에  좋은거를 찾았다. 멀티업로드 선택을 편하게 하는 플러그인이다. input태그를 하나 쓰고 거기에 계속 파일을 추가할 수 있다. 요즘 플래쉬 업로드 소스가 많은 가운데 차라리 플래쉬 없이 이런방식을 선호한다.(미리 파일 업로드 한다는게 서버에 파일관리에 조금 무리 일수 있다.)

jquery 1.4버젼과 플러그인 파일을 인클루드(vs-doc는 에러가 남)

<script src="jquery-latest.js" type="text/javascript" language="javascript"></script>
<script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>

일단 소스부터 보시길
자바스크립터 부분

$(document).ready(function () {
// onsubmit은 file개체가 disabled되는 버그가 있음

//         $("form#FileFrm").bind("submit", function () {
//             if ($("input:file").length > 1) {
//                 if (confirm("업로드 하시겠습니까?") == true) {
//                     return true;
//                 } else {
//                     return false;
//                 }
//             } else {
//                 alert("파일을 첨부해 주세요!!");
//                 return false;
//             }
//         });


         // 태그에 class를 없애고 스크립터에서 input id로 지정
         $("#<%=AttFiles.ClientID%>").MultiFile({
             accept: 'gif|jpg|bmp|png|jpeg',   //허용할 확장자(지정하지 않으면 모든확장자 허용)
             max: 5,                    //업로드 최대파일갯수(지정하지 않으면 무한대)
             list: '#fileList',                  //파일목록을 보여줄 div id(지정하지 않으면 input 뒤에 붙는다)
             STRING: {
                 remove: '제거',   //삭제 이미지아이콘으로도 바꿀수 있다(이미지 태그 넣으면 됨).
                 selected: 'Selecionado: $file',
                 denied: '$ext 는(은) 업로드 할수 없는 파일확장자 입니다!!',  //확장자 제한 문구
                 duplicate: '$file 는(은) 이미 추가된 파일입니다!!'    //중복 파일 문구
             }

             // 각각의 이벤트에 따라 스크립 처리를 할수 있다.
             /*
             onFileRemove: function(element, value, master_element){
             $('#fileList').append('<li>onFileRemove - '+value+'</li>')
             },
             afterFileRemove: function(element, value, master_element){
             $('#fileList').append('<li>afterFileRemove - '+value+'</li>')
             },
             onFileAppend: function(element, value, master_element){
             $('#fileList').append('<li>onFileAppend - '+master_element+'</li>')
             },
             afterFileAppend: function(element, value, master_element){
             $('#fileList').append('<li>afterFileAppend - '+value+'</li>')
             },
             onFileSelect: function(element, value, master_element){
             $('#fileList').append('<li>onFileSelect - '+value+'</li>')
             },
             afterFileSelect: function(element, value, master_element){
             $('#fileList').append('<li>afterFileSelect - '+value+'</li>')
             }
             */
         });

         $("#<%=BtnSubmit.ClientID%>").click(function () {
             if ($("input:file").length > 1) {   // 전체파일갯수에서 기본 폼에 있는 파일을 제외한 수
                 // 파일갯수를 얻는 방법은 이 방법밖에 없더군요
                 // 다른방법 아시는 분 댓글좀 달아주세요
                 if (confirm("업로드 하시겠습니까?") == true) {
                     return true;
                 } else {
                     return false;
                 }
             } else {
                 alert("파일을 첨부해 주세요!!");
                 return false;
             }

         });
     });  //ready

form.aspx

<form id="FileFrm" method="post" enctype="multipart/form-data" runat="server">
<asp:FileUpload ID="AttFiles" runat="server" />
  <br />
  <div id="fileList" style="border:#999 solid 3px; padding:10px;">
  첨부된 파일
  </div>
        <asp:Label ID="Label1" runat="server"></asp:Label>
        <asp:Button ID="BtnSubmit" runat="server" Text="업로드" 
            onclick="BtnSubmit_Click"  />
</form>

form.aspx.cs

protected void BtnSubmit_Click(object sender, EventArgs e)
    {
        string filepath = "D:\\uploadTest";
        HttpFileCollection uploadedFiles = Request.Files;
        Label1.Text += "<strong>업로드 된 파일</strong> <p>";
        for (int i = 0; i < uploadedFiles.Count; i++)
        {
            HttpPostedFile userPostedFile = uploadedFiles[i];
            try
            {
                if (userPostedFile.ContentLength > 0)
                {
                    Label1.Text += "<u>파일 " + (i + 1) + "</u><p>";
                    Label1.Text += "파일타입 : " + userPostedFile.ContentType + "<p>";
                    Label1.Text += "파일크기 : " + userPostedFile.ContentLength + "kb<p>";
                    Label1.Text += "파일이름 : " + userPostedFile.FileName + "<p>";
                    userPostedFile.SaveAs(filepath + "\\" +
                                        System.IO.Path.GetFileName(userPostedFile.FileName));
                    Label1.Text += "저장경로 : " + filepath + "\\" +
                                    System.IO.Path.GetFileName(userPostedFile.FileName) + "<p>";
                }
            }
            catch (Exception Ex)
            {
                Label1.Text += "Error: " + Ex.Message;
            }
        }    
    }

소스에 주석으로 써 놓았지만 자바스크립터에 제어가능하고 태그에서두 제어가능하다. 선택적 확장자및 업로드 갯수, 문구 수정, 첨부파일 삭제 등 이다.
단지 파일개체를 이미지버튼으로 만들면 filestyle등을 이용했을때이다. 하면 버튼이 disabled 되어버린다. 내부소스를 보면 그  부분이 있는데  해 보시는 분 자체 소스를 수정하시면 공유좀 부탁드린다. 써 본 결과 썩 괞찬은 넘인거 같다.
제작자 페이지를 보시면 여러가지 옵션과 파일을 다운 받을 수있다.

링크 :  http://www.fyneworks.com/jquery/multiple-file-upload/