[AJAX] input type="file" 없이 파일 전송하기

jQuery/AJAX 2018. 2. 5. 11:26




input type="file" 없이 파일 전송하기



 -. 지난 포스팅에서 AJAX로 파일 업로드하는 방법을 살펴보았다.([AJAX] AJAX를 사용하여 파일 업로드 하기)

 -. 사실 저 방법을 필자가 가장 많이 사용하는 이유는 기존 <input type="fils"/>의 형태를 숨기기위해서 사용하는 경우가 잦다.

 -. 포스팅 제목을 type="file"없이 라고는 했지만 실질적으로 type="file" 없이 파일 숨기고 전송하기가 된다.


※ 기존의 파일 업로드 방식



# 소스코드

 updateButton.php

<html>
<head>
<title>:: AJAX 파일전송 ::</title>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function ajaxFileUpload() {
        // 업로드 버튼이 클릭되면 파일 찾기 창을 띄운다.
        jQuery("#ajaxFile").click();
    }

    function ajaxFileChange() {
        // 파일이 선택되면 업로드를 진행한다.
        ajaxFileTransmit();
    }

    function ajaxFileTransmit() {
        var form = jQuery("ajaxFrom")[0];
        var formData = new FormData(form);
        formData.append("message", "파일 확인 창 숨기기");
        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 id="ajaxFrom" method="post">
    <!-- display:none으로 화면상에서 파일 확인 창을 숨겨둔다 -->
    <input type="file" id="ajaxFile" onChange="ajaxFileChange();" style="display:none;"/>
    <input type="button" onClick="ajaxFileUpload();" value="업로드"/>
</form>
</body>
</html>



# 출력결과


① <input type="file">의 모습은 볼 수 없다. 업로드 버튼을 눌러 파일을 업로드 한다.




② 파일이 한번에 업로드 되는 것을 확인 할 수 있다.





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

jQuery/AJAX 2018. 2. 2. 18:00




참조 : 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>





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로 파일 전송을 하게 되는 경우의 수증에 하나는.


UI / UX 등 디자인 이나 사용자 편의를 위해서인 경우도 있는데


그러한 이유는 다음 포스팅에 정리해 두었으니 기회가 되면 봐두는것도 좋을 것 이다.


예제활용 : [AJAX] input type="file" 없이 파일 전송하기





[Ajax] Ajax를 통한 색인, 연관 배열 전송 방법

jQuery/AJAX 2017. 8. 2. 18:10




참조 : 연관 배열을 사용해서 폼 요소의 이름과 값 저장하기




jQuery Ajax를 통해 POST 타입으로 연관 배열의 값을 전송하는중


값이 제대로 전달되지 않는 에러가 발생하였다.


원인은 자바스크립트의 배열 선언에서 문제가 있었다.


자바스크립트에서 배열 선언 방식은 아래와 같이 나뉘는데.


설명

텍스트

기호

색인 배열

 첨자를 이용하여 접근하는 것

new Array();

[ ];

연관 배열

 자바의 맵 처럼 KEY에 대한 값을 저장하는 구조

new Object();

{ };


필자는 계속해서 첫번째 색인 배열의 방식으로


연관배열을 사용 하고 있었던 것이다.

 







■ jQuery Ajax를 통한 색인 배열의 전송




01. 가장먼저 기본적인 색인 배열로 선언한 값을 Ajax로 전송하는 예제이다.

 get_array_ajax.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>jQuery Ajax를 통한 연관배열 전송</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    function arrayAjaxParsing() {

        var arrAjax = new Array();

        arrAjax[0] = "첫번째";
        arrAjax[1] = "두번째";
        arrAjax[2] = "세번째";

        jQuery.ajax({
              url : "./set_array_ajax.php"
            , type : "POST"
            , data : { postData:arrAjax }
            , success : function(json) {
                var obj = JSON.parse(json);
                if(obj.ret == "succ") {
                    alert(obj.message);
                } else {
                    alert(obj.message);
                }
            }
        });
    }
</script>
<body>
<input type="button" onClick="arrayAjaxParsing();" value="전송"/>
</body>
</html>




02. 전송된 값을 보여줄 페이지

 set_array_ajax.php

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




03. 위 코드를 웹 브라우저의 개발자 도구를 통해서 보면 아래와 같은 결과를 확인 할 수 있다.

 ① 파이어 버그같은 개발자 도구 프로그램을 실행한다.

 ② 전송된 값이 표현될 부분을 오픈해 둔다.

 ③ 전송 버튼을 클릭한다.


그럼 위와 같은 결과가 나오는 것을 확인 할 수 있다.










■ jQuery Ajax를 통한 연관 배열의 전송 - 실패 사례




01. 그럼 이제 위 코드를 연관배열로 바꾸어 보자. 아래 예제는 위와 동일한 소스에서 색인배열만 연관배열로 바꾸었다.

 get_array_ajax.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>jQuery Ajax를 통한 연관배열 전송</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    function arrayAjaxParsing() {

        var arrAjax = new Array();

        arrAjax['one'] = "첫번째";
        arrAjax['two'] = "두번째";
        arrAjax['three'] = "세번째";

        jQuery.ajax({
              url : "./set_array_ajax.php"
            , type : "POST"
            , data : { postData:arrAjax }
            , success : function(json) {
                var obj = JSON.parse(json);
                if(obj.ret == "succ") {
                    alert(obj.message);
                } else {
                    alert(obj.message);
                }
            }
        });
    }
</script>
<body>
<input type="button" onClick="arrayAjaxParsing();" value="전송"/>
</body>
</html>





02. 출력결과는 아래와 같다. 그렇지만 이번에는 개발자 도구에 넘어온 값이 없는 모습을 확인 할 수 있다.





03. 무언가 잘못된건지 값을 넘기기전 경고창을 띄워보면 분명 값이 잘 나타나는 것을 볼 수 있다.




※ 필자는 그동안 색인 배열을 통해서도 연관배열을 진행중인 코드내에서 크게 무리없이 사용하였기에.

   계속 이런식으로 사용하고 있었고.

   경고창에 값또한 정상적으로 띄어졌기에 이 문제를 해결하는데 상당히 삽질을 많이 해야 했기에.

   이번에 확실히 정리하고 가려고 이렇게 포스팅 하게 되었다.








■ jQuery Ajax를 통한 연관 배열의 전송 - 성공 사례



01. 위와 같이 진행했던 예제에서 new Array()를 new Object()로 수정하고 다시 실행해 보자.

 get_array_ajax.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>jQuery Ajax를 통한 연관배열 전송</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    function arrayAjaxParsing() {

        var arrAjax = new Object();

        arrAjax['one'] = "첫번째";
        arrAjax['two'] = "두번째";
        arrAjax['three'] = "세번째";

        jQuery.ajax({
              url : "./set_array_ajax.php"
            , type : "POST"
            , data : { postData:arrAjax }
            , success : function(json) {
                var obj = JSON.parse(json);
                if(obj.ret == "succ") {
                    alert(obj.message);
                } else {
                    alert(obj.message);
                }
            }
        });
    }
</script>
<body>
<input type="button" onClick="arrayAjaxParsing();" value="전송"/>
</body>
</html>





02. 그럼 이번에는 전송된 set_array_ajax.php 에서도 전송된 값이 잘 넘어오는 모습을 확인 할 수 있다.









■ 설명




자바스크립트에서는 배열 인덱스가 키워드를 나타내는 문자열이고, 이 문자열에 주어진 값을 매핑하는 연관 배열을 만들 수 있다. 해결에서 배열 인덱스는 주어진 배열 원소의 식별자이고, 배열의 실제 값은 폼 요소의 값이다.


연관 배열을 만들 수 있지만 이를 위해 Array 객체를 사용하지는 않는다. Array 객체를 사용하는것은 위험하고 사실상 추천하지 않는다. Array.prototype을 통해 Array 객체의 기능을 확장하면 Array 객체를 사용해서 작성된 연관 배열을 for in 반복문에서 사용할 때 문제가 발생한다.


for in 반복문은 String 객체의 속성이나 개발자가 직접 작성한 객체의 속성과 같은 어떤 객체의 속성에 대해 반복하는 것이다.


Array 객체를 연관 배열로 만들어 사용할 때 실제로 원한느 것은 배열 원소를 추가하는 것이 아니라 배열 객체에 속성을 추가하는 것이다. Array 뿐만 아니라 RegExp 또는 String으로도 연관 배열을 만들 수 있다. 자바스크립트에서 이런 일이 가능한 이유는 객체가 연관배열로 되어 있기 떄문이다.



배열에 새 값을 추가할 때


  obj[propName] = "somevalue";




이때 실제로는 객체에 새로운 속성이 추가된 것이다.


  obj.propName = "somevalue";



연관 배열이 숫자 기반 배열과 어떻게 다른지 더 알아보자. Array를 사용해서 연관 배열을 작성하면 인덱스 배열의 '원소'에 접근할 수 없고 length 속성은 0을 반환한다.


Array 대신 자바습크립트의 Object를 직접 사용해서 연관 배열을 작성하면 똑같은 기능을 하면서도 prototype을 사용해서 Array 객체를 확장한 라이브러리와의 충돌을 피할 수 있다.