[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">의 모습은 볼 수 없다. 업로드 버튼을 눌러 파일을 업로드 한다.




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