[PHP,jQuery] ajax, jquery 로 이미지 업로드시키기 1

작업중에 ajax 로 깔끔하게 현재페이지에 모달팝업형태의 이미지 업로드 창이 나타나고 바로 처리되는 방식의 메커니즘을 작업하게 되었다.

 

준비물 : ajax, jquery  등등 ㅋ

 

[실제페이지]

 

<p>이미지파일 올리기</p>

<form name="fphoto" id="fphoto" method="post" enctype="multipart/form-data">
<input type="file" id="userfile1" name="userfile1" style="width:220px;"><input type="button" id="photoBtn" value="올리기" style="width:50px;">
<div class="title roboto" style="padding:8px 0;">( JPG, PNG, GIF 확장자 형식의 이미지 )</div>
</form>

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

<script>

$("#photoBtn").on('click',function(e){
 
 e.preventDefault(); // 예기치 않은 이벤트버블링 방지

 

 var val = $("#userfile1").val();
 if (!val) {
  $(".title.roboto").html("이미지 파일을 선택하여 주십시오.");
  $("#userfile1").focus();
  return false;
 }

 

 // Formdata  겍체를 만들고 append로 추가시켜 data 형식으로 보낸다.

 var fd = new FormData($("#fphoto")[0]);
 fd.append("userfile1",$("input[name=userfile1]")[0].files[0]);

 

 $.ajax({
  type: "post",
  url: "ajax.php?com_no=<?=$com_no?>",
  data: fd,
  processData: false,
  contentType: false,
  success: function(data,status,xhr) {
    window.location.reload(true); // 업로드후 현재 페이지를 리로딩시킨다.

    

    alert(data);  // 이미지 업로드 OK;
  },
  error: function(xhr,status,error) {
   $(".title.roboto").html("사진 업로드시 Error 발생");
  }
 });

});

</script>

 

[ajax.php 파일]

실제 data 값을 넘겨 받아서 이미지를 업로드 시키고, DB 추가 및 수정시킨다.

 

$_FILES[userfile1] 형식으로 그 값들이 넘어온다.

$_FILES[userfile1][name] 파일명

$_FILES[userfile2][size] 파일 사이즈값

 

echo "ok";