[jQuery] AJAX를 사용한 파일 업로드[jQuery] AJAX를 사용한 파일 업로드

Posted at 2018. 3. 18. 21:18 | Posted in JavaScript & jQuery/jQuery
반응형




참고 : http://b1ix.net/213




■ AJAX를 사용하여 파일 업로드 하기




-. 웹 페이지를 제작하는 과정에서 파일을 업로드시 페이지를 새로고침 하지 않고 등록해야 하는 경우가 종종 발생한다.

  그러한 경우에 AJAX를 사용하여 파일을 손쉽게 올려보도록 하자.


-. AJAX로 파일을 업로드 시에 업로드 된 파일 데이터를 넘겨주기 위해서는 아래 사항을 꼭 설정해야 한다.


① 폼(form)의 값이 AJAX를 통해서 넘어가기 때문에 from에 enctype="multipart/form-data"를 꼭 필요로 하지 않는다.
② FormData : 해당 폼의 모든 값들(file포함)을 해당 객체에 한번에 담아 보내기 위해 사용된다. (※ ie10부터 사용가능)
③ processData
   -. 기본 값은 true이다.
   -. 해당 값이 true일때는 data 값들이 쿼리스트링 형태인 key1=value1&key2=value2 형태로 전달된다.
   -. 하지만 이렇게 하면 file 값들은 제대로 전달되지 못한다.
   -. 그래서 해당 값을 false로 해주어 { key1 : 'value1', key2 : 'value2' } 형태로 전달해 주어야 file 값들이 제대로 전달된다.
 ④ contentTyp
   -. 기본값은 'application/x-www-form-urlencoded'이다. 해당 기본 타입으로는 파일이 전송 안되기 때문에 false로 해주어야 한다.




# 소스코드01 - 파일을 업로드하는 소스코드

 ajaxFormUpload.php

<html>
<head>
<title>:: AJAX 파일전송 ::</title>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function ajaxFileUpload() {

        var form = jQuery("#ajaxFrom")[0];
        var formData = new FormData(form);
        formData.append("message", "ajax로 파일 전송하기");
        formData.append("file", jQuery("#ajaxFile")[0].files[0]);

        jQuery.ajax({
              url : "./ajaxFormReceive.php"
            , type : "POST"
            , processData : false
            , contentType : false
            , data : formData
            , success:function(json) {
                var obj = JSON.parse(json);
            }
        });
    }
</script>
</head>
<body>
<form enctype="multipart/form-data" id="ajaxFrom" method="post">
    <input type="file" id="ajaxFile"/>
    <input type="button" onClick="ajaxFileUpload();" value="업로드"/>
</form>
</body>
</html>

※ form 태그의 enctype="multipart/form" 사용하지 않아도 된다.




# 소스코드02 - 업로드하여 전송된 파일의 속성값을 출력하는 소스코드

 ajaxFormReceive.php

<?php
    echo "### POST ###";
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";

    echo "### FILE ###";
    echo "<pre>";
    print_r($_FILES);
    echo "</pre>";
?>




# 출력결과01 - 업로드할 파일을 선택한뒤 파일을 전송한다.




# 출력결과02 - 사용하는 브라우저의 개발자 도구를 활용하여 출력된 결과를 확인해 보자.




위와같이 ajax를 사용하여 파일을 전송이 가능한 것을 확인 할 수 있다.


필자가 이렇게 AJAX로 파일을 전송하게 된 이유는.


주로 UI / UX 적인 디자인적 이슈가 많은 편인데.


그러한 이유는 아래 링크된 페이지의 포스트를 통해 확인할 수 있다.




#참고01 : input type='file' 없이 파일 전송하기

#참고02 : AJAX로 파일 업로드하고 썸네일 이미지 받아오기




반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 따라다니는플로팅 배너 제작  (0) 2018.04.23
[jQuery] 선택 날짜를 태그로 생성하는 모듈  (0) 2018.04.19
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기  (2) 2018.03.22
[jQuery] 쇼핑몰 대표 이미지 상품박스  (0) 2018.03.14
[jQuery] 이미지 슬라이드 제작  (0) 2018.03.10
//

티스토리툴바