[php + JS] 웹사이트에 첨부파일(pdf 등) 올리는 실제 프로그램 구현과정

웹사이트에 파일 올리기 기능을 구현해서 실제 사용하는 예를 기록하기 위함입니다.

업무용 웹사이트를 구현해서 사용해 보고 싶은 분들에게 도움이 되길 희망하며 글을 적습니다.

도면 첨부 버튼을 만들고 실제 웹사이트 서버에 기록하는 방법에 대해 기술합니다.

 

 

도면 첨부 버튼을 누르면 처리하는 과정 및 첨부삭제를 누르면 삭제하는 루틴까지 일련의 과정을 설명해 볼게요.

우선 버튼을 보시면 아시겠지만, 부트스트랩을 썼으니 선언이 필요합니다.

<!-- 최초화면에서 보여주는 상단메뉴 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">

부트스트랩 5.0 이상이 아니면 제이쿼리도 먼저 선언해 줘야 하니... 그걸 포함하면 아래와 같겠네요.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
<link  rel="stylesheet" type="text/css" href="../css/common.css">

위의 형태대로 하려면 간단히 html도 들어가야 하겠죠?

<label  for="pdf_file" class="btn btn-primary btn-sm"> 도면 첨부 (pdf파일)</label> &nbsp;&nbsp;
<input id="pdf_file" type="file" name="pdf_file" style="display:none;" accept=".pdf" />	
<button id=delattachedfileBtn type="button" class="btn btn-outline-danger btn-sm"  >
첨부삭제  </button> 
<input type="text" id="pdffile_name" name="pdffile_name" value="<?=$pdffile_name?>" size="40" >

화면에 나타날 내용을 전부 된 것 같습니다.

이제 서버쪽이나 자바스크립트 쪽에서 처리하는 부분에 대한 기술을 해야겠죠.

파일선택을 눌러 파일을 선택하면 화면에 보여주는 input부분 자바스크립트 코드

 $("#pdf_file").change(function(){   
	//input file 태그.
	var file = document.getElementById('pdf_file');
	//파일 경로.
	var filePath = file.value;
	//전체경로를 \ 나눔.
	var filePathSplit = filePath.split('\\'); 
	//전체경로를 \로 나눈 길이.
	var filePathLength = filePathSplit.length;
	//마지막 경로를 .으로 나눔.
	var fileNameSplit = filePathSplit[filePathLength-1].split('.');
	//파일명 : .으로 나눈 앞부분
	var fileName = fileNameSplit[0];
	//파일 확장자 : .으로 나눈 뒷부분
	var fileExt = fileNameSplit[1];
	//파일 크기
	var fileSize = file.files[0].size;

	$("#pdffile_name").val(fileName);		
	
	$("#copied_file").val('');
 });

서버로 저장하는 버튼으로 인해

폼전송으로 

<form  name="board_form" id="board_form" onkeydown="return captureReturnKey(event)" method="post" action="insert.php>" enctype="multipart/form-data"> 

submit하면 php 코드를 아래와 같이 작성합니다.

// submit으로 전달된 자료 처리 구문
// 첨부파일에 대한 처리방법 SQL에 넣을때는 보이는 파일명과 실제 저장될 파일명 구분해서 저장함.

$copied_file = $_REQUEST["copied_file"];  
$pdffile_name = $_REQUEST["pdffile_name"];  
	
if($copied_file=='' && $pdffile_name!='' )
{	
// pdf파일 대한 정보						
	$pdffile_name = $_FILES['pdf_file']['name'];			

			$files = $_FILES["pdf_file"];    //첨부파일	

			$upload_dir = './attachedfile/';   // sub폴더 물리적 저장위치   

	if (isset($_FILES)) {
		$name = $_FILES["pdf_file"]["name"];
		$type = $_FILES["pdf_file"]["type"];
		$size = $_FILES["pdf_file"]["size"];
		$tmp_name = $_FILES["pdf_file"]["tmp_name"];
		$error = $_FILES["pdf_file"]["error"];
		
        // 서버에 저장할때는 한글로 저장하면 깨지는 현상이 있으니 임시 이름을 지어서 저장한다.
			// 확장자 pdf파일
			$file_ext  = "pdf";	
			   
			$new_file_name = date("Y_m_d_H_i_s");
			$copied_file_name = $new_file_name.".".$file_ext; 

		//서버에 임시로 저장된 파일은 스크립트가 종료되면 사라지므로 파일을 이동해야함.
		$upload_result = move_uploaded_file($tmp_name, $upload_dir . $copied_file_name);

		if($upload_result){
			$result = "파일 업로드 성공 경로 - " . $upload_dir;
			$copied_file = $copied_file_name;
		}
	}
}

// 자신의 서버 열기관련 구문을 넣으세요.    
 require_once("../lib/mydb.php");
 $pdo = db_connect();

// 수정일 경우
 if ($mode=="modify"){
 try{		 
    $pdo->beginTransaction();   
    $sql = "update (본인의 서버 필드 기술) set ";    
	$sql .=" pdffile_name=?, copied_file=?  ";   	
	$sql .= " where num=? LIMIT 1" ;       	   
    $stmh = $pdo->prepare($sql); 

	$stmh->bindValue(158, $pdffile_name, PDO::PARAM_STR);	
	$stmh->bindValue(159, $copied_file, PDO::PARAM_STR);		
	$stmh->bindValue(163, $num, PDO::PARAM_STR);	 
    $stmh->execute();
    $pdo->commit(); 
        } catch (PDOException $Exception) {
           $pdo->rollBack();
           print "오류: ".$Exception->getMessage();
       }                                
  }

 

그럼 삭제버튼의 동작은?

$("#delattachedfileBtn").click(function(){  
  $("#pdffile_name").val('');
  $("#copied_file").val('');
});

값을 초기화 해서 넘겨준다.

 

실제 실행해서 작동해 보니 등록/삭제가 잘 되었습니다.

pdf파일 첨부 로직은 여러가지인데 한가지만 보신거라 생각하시면 좋겠습니다. 다양한 좋은 코드들이 많으니, 자신이 가장 쓰기 좋은 코드로 만들어 보세요~