게시판 - 글쓰기 단일파일첨부

이태현·2025년 9월 1일

Web 개발

목록 보기

35/53

단일파일첨부

UI

  <div>
    <input type="file" name="attach" id="id_attach" class="mt-2 form-control">
  </div>

서머 노트 웹에디터 밑에 위와 같이 file 첨부를 추가해 줬습니다.

넘겨받는 값 확인하기

JS

    const id_attach = document.querySelector("#id_attach")
    const file = id_attach.files[0]
    // Ajax
	f.append("files", file) // 파일 첨부

파일 첨부 요소를 찾아 위와 같이 file에 담아줍니다. Ajax 형식으로 데이터를 담아서 데이터를 보내줍니다.

PHP

print_r($_FILES);
exit;

넘겨받은 파일에 대한 내용이 정상적으로 넘어온 걸 확인할 수 있고 해당 파일은
[tmp_name] => C:\xampp\tmp\phpE0CD.tmp 여기에 임시로 저장되어 있는 걸 볼 수 있습니다.

확장자 구하기

PHP

  // 파일첨부
  if (isset($_FILES["files"]) && $_FILES["files"]["name"] != "") {
    $tmparr = explode(".", $_FILES["files"]["name"]);
    $ext = end($tmparr);
    $flag = rand(1000, 9999);
    $filename = 'a' . date('YmdHis') . $flag . '.' . $ext;
  }

다른 이미지와 이름이 중복될 수 있기 때문에 랜덤 값과 파일명 앞부분에 'a'를 추가했습니다.

바뀐 파일 이름 결과

	echo $filename;
    exit;

변경된 파일명이 잘 나타나 있는 걸 볼 수 있습니다.

파일 저장하기

    $file_ori = $_FILES["files"]["name"]; // 원본 이미지
    copy($_FILES["files"]["tmp_name"], BOARD_DIR . '/' . $filename); // 이미지 파일 저장
    $full_str = $filename . '|' . $file_ori; // 원본 이미지 이름과 바뀐 이미지 이름

원본 이미지 이름과 바뀐 이미지 이름을 저장하는 이유는 저장할 때는 a202509019999.jpg라고 저장하지만 보일 때는 원본 이미지 이름을 그대로 사용하기 위함입니다.
※ 주의
파일에서 사용하지 않는 구분자 "|"(vertical bar)를 사용할 겁니다.

덕구|강이지.jpg

위와 같이 "|"를 회원들이 이미지 이름으로 사용할 수 있기 때문입니다.

ex )
아래와 같이 사용할 수 없는 구분자를 사용해야 이미지를 저장하는 일반 회원들이 이미지 이름에 해당 기호를 사용할 수 없어서 DB에 저장할 때 원본 이름과 바뀐 이름을 같이 저장할 수 있습니다.

물론 저기서 구분자 아무거나 사용하셔도 무방합니다.

DB에 값 추가하기

게시판 DB에 파일을 저장하기 위한 공간을 마련합니다.

ALTER TABLE board ADD COLUMN files VARCHAR(255) DEFAULT '' AFTER content;

추가된 DB 확인하기

content 다음 구문에 추가된걸 확인할 수 있습니다.

DB 수정하기

추가된 이미지를 넣어서 수정합니다.

  public function input($arr)
  {
    $sql = "INSERT INTO board(
    bcode, id, name, subject, content, files, ip, create_at) VALUES(
    :bcode, :id, :name, :subject, :content, :files, :ip, NOW())";
    $stmt = $this->conn->prepare($sql);
    $stmt->bindParam(":bcode", $arr["bcode"]);
    $stmt->bindParam(":id", $arr["id"]);
    $stmt->bindParam(":name", $arr["name"]);
    $stmt->bindParam(":subject", $arr["subject"]);
    $stmt->bindParam(":content", $arr["content"]);
    $stmt->bindParam(":files", $arr["files"]);
    $stmt->bindParam(":ip", $arr["ip"]);
    $stmt->execute();
  }

DB에 데이터 보내기

  $memberArr = $member->getInfo($ss_id);
  $name = $memberArr["name"];
  $arr = [
    "bcode" => $bcode,
    "id" => $ss_id,
    "name" => $name,
    "subject" => $subject,
    "content" => $content,
    "files" => $full_str,
    "ip" => $_SERVER["REMOTE_ADDR"]
  ];
  $board->input($arr);
  die(json_encode(["result" => "success"]));