jquery ajax 를 이용한 간편 파일 업로드 ( fileObject 를 바로 업로드 하는 방식 )

 

 

 

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

 

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

 

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

 

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

 

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

 

 

 

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

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

 

Form 구성입니다.

        <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>

 

 

javascript 입니다.

            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("업로드 성공!!");
                            }
                    });
            }

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

 

 

 

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

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

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

 

                var options = {
                        dataType:"text",//결과
                        success:function(responseText){
                            alert("업로드 성공!!");
                        }, error:function(e){e.responseText();}
                    };
                    
                
                $("#FILE_FORM").ajaxForm(options).submit();