2011. 9. 28.

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/

댓글 6개:

  1. 업로드를 처리 하는 실제적인 함수가 어떤건가요? 그리고 제가 php를 이용하는데... 어떻게 해야 할지 ㅡㅡ;

    답글삭제
  2. 현재글 예제는 닷넷이라 닷넷 컨트롤을 html개체로 바꿔주셔야 하고요 form에서는 runat="server"을 제거
    php에서는 파일 개체를 이렇게 선언 하시고 하셔야 합니다. input type="file" name="AttFiles[]"
    이렇게 하시고 밑에 버튼은 submit버튼으로 바꾸어 주세요 파일쪽 처리를 이렇게
    php메뉴얼에 발췌
    foreach ($_FILES["AttFiles"]["error"] as $key => $error) {
    if ($error = UPLOAD_ERR_OK) {
    $tmp_name = $_FILES["AttFiles"]["tmp_name"][$key];
    $name = $_FILES["AttFiles"]["name"][$key];
    move_uploaded_file($tmp_name, "data/$name");
    }
    }
    php 메뉴얼을 보시면 다중파일(복수파일) 업로드 라고 해서 처리 방목과 설명이 나옵니다.

    답글삭제
  3. 많은 도움이 되었습니다. 질문하나만 할께요 찾아보기 클릭후 파일을 선택할때 한개씩만 선택이되던데 다중선택으로 바꿀수는없나요?? input테그에 multiple="multiple" 이 옵션을 줬는데 업로드 리스트에는 1개의 파일만 표시되네요.. 방법이 없을까요??

    답글삭제
    답글
    1. 답글로 다는거를 깜박하구 밑에 적어 놨어요

      삭제
  4. html에서는 다중선택이 되지 않습니다. multiple옵션은 다중선택관련 사항이 아닙니다. 다중선택하시려면 플래쉬 업로드 개체를 쓴거를 찾아보시면 됩니다.

    답글삭제
  5. 해당 플러그인을 사용해서 이미지 수정을 하려고 하는데 저장된 이미지를 어떻게 불러올 수 있을까요ㅜㅜ 아무리 봐도 모르겠어요

    답글삭제