jQuery 로 파일 업로드 하기

jQuery를 이용하여 파일 업로드 구현하기 

홈페이지를 만들거나 어플을 만들때 jQuery를 활용해서 제작되는 경우 가장 편한게 form 입니다.

form의 경우 이전 홈페이지 만들때는 페이지가 넘어가버리는데 jQuery를 활용하면 resultcode만 맞추면 홈페이지의 제작에서 상당히 편리합니다.

그런데 파일 업로드 부분에 대한 기술이 많이 없는것 같습니다.

보통은 파일 업로드와 동시에 등록되어 버리는 소스들은 많이 있습니다. 물론 그게 편하기는 하겠지만 보편적인 폼을 제작하고 싶은 경우는 아이프레임을 이용하시는 경우가 많습니다. 

오늘은 jquery를 활용해서 첨부파일까지 넘기는 소스를 보여 드리고자 합니다.

이렇게 모바일 페이지에서 폼을 넣는 경우에 이미지 파일을 등록합니다. 

그 소스는

<form action="admin/company_save_file.php" method="post"  name="company_form" id="company_form"  >

                        <table class="uk-table uk-table-striped">

                      

                            <th>company</th>

                            <td><input name="company" id="company" type="text"></td>

                          </tr>

                          <tr>

                            <th>address</th>

                            <td><input id="autocomplete" placeholder="Enter your address"

             onFocus="geolocate()" type="text" name="address"></td>

                          </tr>

                          <tr>

                            <th>telephone</th>

                            <td><input name="telephone" id="telephone" type="text"></td>

                          </tr>

                          <tr>

                            <th>Photo images</th>

                            <td><input name="pic1" id="pic1" type="file"></td>

                          </tr>

                          <tr>

                          <th colspan="2" class="uk-text-center">

                          <span id="save_btn" class="uk-button uk-button-success" onclick="back()">BACK</span>

                          <span id="save_btn" class="uk-button uk-button-danger" onclick="company_reg()">SAVE</span>

                          </th>

                          </tr>

                        </table>

                        </form>

이렇게 구현된다고 봤을때 company_reg()만 처리 해주시면 됩니다.

function company_reg()

  {    

     var form = $('#폼id값')[0];

         var formData = new FormData(form)

 $.ajax({

  type  : "POST",

  url : "admin/저장.php",

  data: formData,

  datatype : 'formData',

  processData: false,

                    contentType: false,

  success: function(data) {     

  if (data=="ok") {

    alert(" SHOP INFOMATION SAVE !!!"+data);

    // 이미지 등록 순서로 넘어가는 부분 

    company_form.reset();

// 등록완료

  } else {

    alert(data); // 에러 코드

  }

  }

});

  }

이렇게 처리하시면 이미지까지 등록되는 폼이 jquery를 활용가능해 집니다.