[PHP] 파일 업로드 / 깔끔한 파일 업로드 CSS

 

[ 업로드 폼 ]

1. 업로드 폼 만들기 

나는 요 폼을 사용했다

나는 요 폼을 사용했다!

 

버튼을 하나 만들어서 파일 업로드 form 숨기고 버튼이랑 연결시켜뒀다. 

그리고 첨부할 파일명 따로 값 받아내서 input에다 넣어주고, 

-> 이렇게 하면 번거롭긴 한데 일반적인 파일업로드는 예쁘지가 않아서,, 

<div class="form-group mt-lg">
    <label class="col-sm-3 control-label">업로드</label>
    <div class="col-sm-7">
    <input type="text" for="test_file" name="label_file_nm" class="form-control" value="<?= fn_getArrVal($row, "label_file_nm") ?>" required placeholder="첨부할 파일명" readonly="readonly"/>
    </div>
    <label class="btn-upload" for="test_file">•••</label>

    <script language="javascript">
    // 1. uploadFile 받은 이벤트 function : 파일 선택했을 때 어떤 이벤트가 발생? 
    $('#test_file').change(function() {
      
    	var fileObj, pathHeader, pathMiddle, extName, allFileName, pathEnd, rootPath;

        fileObj = $(this).val(); // 통 파일 이름 
        pathEnd = fileObj.length;
    	// 3. 파일명만 가져오기 
   		if (fileObj != "") {
          pathHeader = fileObj.lastIndexOf("\\"); // /가 처음 나오는 인덱스
          pathMiddle = fileObj.lastIndexOf(".");

          filePath = fileObj.substring(0, pathHeader); //파일의 위치(경로)
          fileName = fileObj.substring(pathHeader + 1, pathMiddle); //파일명만
          extName = fileObj.substring(pathMiddle + 1, pathEnd); // 확장자명만
          allFileName = fileName + "." + extName;
          } else {
			alert("파일을 선택해주세요");
      			return false;
		}
    		// 2. input id 값에 찾아오기
    		$('input[name=label_file_nm]').val(allFileName); // 파일 이름 + 확장자
   	 });
    </script>

cf) 확장자나 파일명만 가져오는 경우에 대비해 미리 filePath, extName 등등을 설정해놨음. 

 

[ modal 화면의 form ] - 저장(submit)

2. 나는 파일 업로드 모달창을 띄워서, 모달창의 저장버튼을 누름으로써 파일이 저장되게끔하는 기능을 만들었다

<form id="uploadfrm" action="/inc/fileUploads.php" method="post" enctype="multipart/form-data" onsubmit="return fileCheck();" target="param">
    <input type="file" name="test_file" id="test_file" style="display:none">
    <button type="submit" class="btn btn-primary modal-sg-confirm">저장</button>
    <button class="btn btn-default modal-sg-dismiss">취소</button>
 </form>
  	<iframe id="uploadfrm" class="iframe-hidden" name="param"></iframe>
  
  <script type="text/javascript">
	function fileCheck() {
		//html 태그중 file 태그에 값을 확인하여 파일이 있는지 없는지 확인하여 서버 전송 할지 하지 않을지 판단.
		var fileCheck = document.getElementById("test_file").value;
		if (!fileCheck) {
			alert("파일을 첨부해 주세요");
			return false;
		} else {
			return true;
		}
	}
</script>

action="/inc/fileUploads.php" 

-> 

method="post" 

->

enctype="multipart/form-data"

->

저장버튼을 누름과 동시에 submit이 되게 해서 바아로 fileUpload.php로 넘어가게끔 했다 

 

이렇게 하니깐 폼 자체가 fileUpload로 넘어가버려서

 

iframe으로 hidden 설정해서 화면이 넘어가지 않게끔 만들었다. 

 

 

[ fileUploads.php ]

<?php
 
     $myfile_save_dir ="../lblForm/"; // 저장할 서버 경로 
     
     //PHP 함수의 $_FILES 함수에서 지원하는 name, type, size, tmp_name, error 활용해 원하는 형태로 코딩 가능.
     $filename = $_FILES['test_file']['name'];
     
     /* Choose where to save the uploaded file */
     $location = $myfile_save_dir.$filename;
     
     /* Save the uploaded file to the local filesystem */
     
     move_uploaded_file($_FILES['test_file']['tmp_name'], $location);
     // 만약 업로드 성공이면 go to 원래 파일 
?>

if(!move_uploaded_file($_FILES['file']['tmp_name'], $upfile));

// 임시 경로에 저장된 파일을 옮겨주는 작업 

 

 

[ form.js ]

- 저장 버튼 눌렀을 때, 이벤트 처리하는 javascript 파일 

$labelModal.find(".modal-sg-confirm").click(function (e) {
      // 저장 눌렀을 때 바로 저장(submit) 되게끔 
      document.getElementById('uploadfrm').submit();
      e.preventDefault();

      if ($("#label-form").valid()) {
      /* save ajax */
      sg_ajaxPost(conf_getAjaxLabelSaveUrl(), $("#label-form").serialize(), function (rslt) {
      $.magnificPopup.close();
      /*추가된 부분*/
      alertForm(rslt.succ ? "성공" : "실패", rslt.succ ? "정상적으로 처리되었습니다." : rslt.errMsg, rslt.succ ? "success" : "error", "");
      document.getElementById('uploadfrm').submit();
      fn_refresh();
      /*추가된부분*/
      }, function (xhr, status, err) {
      $.magnificPopup.close();
      sg_commError(xhr, status, err);
      }, true);
      }
});

-> 여기서 중요한부분 

 document.getElementById('uploadfrm').submit();

- form의 submit을 자바스크립트로 실행한다 

 

 

---

▶ 이렇게 해서 파일을 선택하면 input에 텍스트를 넣어주고, 

▶ 저장 버튼을 누르면 ,

▶ 내가 설정해둔 서버경로로 들어간 것을 확인할 수 있다.