ajax를 이용하여 파일을 업로드하는 방법을 알아보겠습니다.

 

물론 input file 태그가 있어도 되고 없어도 됩니다.

 

이유는 file object 를 FormData에 추가하고 바로 업로드 할꺼니까요

 

작업을 하다보니 파일객체는 있는데 파일태그는 readonly type 이라서 value 에 추가가 되지 않더라구요

 

그럴땐 아래 소스를 조금 변경하면 파일객체를 가지고 전송할 수 있습니다.

 



 

 

먼저 jquery 를 import 하는건 기본입니다.

1
2
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 
cs

 

Form 구성입니다.

1
2
3
4
5
        <form id="FILE_FORM" method="post" enctype="multipart/form-data" action="">
            <input type="file" id="FILE_TAG" name="FILE_TAG">
            <input type="file" id="FILE_TAG2" name="FILE_TAG2">
            <a class="ui-shadow ui-btn ui-corner-all" href="javascript:uploadFile();">전송</a>
        </form>
cs

 

 

javascript 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
            function uploadFile(){
                var form = $('#FILE_FORM')[0];
                var formData = new FormData(form);
                formData.append("fileObj", $("#FILE_TAG")[0].files[0]);
                formData.append("fileObj2", $("#FILE_TAG2")[0].files[0]);
 
                $.ajax({
                    url: '',
                            processData: false,
                            contentType: false,
                            data: formData,
                            type: 'POST',
                            success: function(result){
                                alert("업로드 성공!!");
                            }
                    });
            }
cs

4# ~ 5# : $("#FILE_TAG")[0].files[0] 이 부분이 FileObject 입니다. FileObject 객체가 있다면 대체하면 사용 가능합니다.

 

 



 

위 소스의 브라우저 스팩은 IE10 부터 지원 합니다.

그 이하는 https://github.com/malsup/form/ 여기에서 jquery.form.js 을 다운받고 import 해야합니다.

그리고 다음과 같이 ajaxForm 로 전송해야합니다.

 

1
2
3
4
5
6
7
8
9
                var options = {
                        dataType:"text",//결과
                        success:function(responseText){
                            alert("업로드 성공!!");
                        }, error:function(e){e.responseText();}
                    };
                    
                
                $("#FILE_FORM").ajaxForm(options).submit();
cs

 

 

 

by 개발자 CofS 2016.04.08 15:41
  • handia 2017.06.07 19:08 신고 ADDR EDIT/DEL REPLY

    javascript 2번째줄에 form태그 아이디 가져온건가요? 아니면 배열 만든건가요 ?

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2017.06.07 19:22 신고 EDIT/DEL

      오타가 있었던거 같네요 ㅎㅎ선택자가 빠져있네요