Ajax 로 PHP 에 파일 전송하기

1. form 태그로 파일을 받는다.

<input> 태그 안에 type 을 파일로 지정해주어 파일을 받아올 수 있다.

<div class="project-create">
    <h3>프로젝트 추가하기</h3>
    <form enctype="multipart/form-data" method="post">
        <div>제목 : <input name="nameC" type="text"/></div>
        <div>내용 : <textarea name="descriptionC"></textarea></div>
        <div><input name="userfileC" type="file"/></div>
        <div><button type="button" onclick="projectCreateSubmit()">저장</button></div>
    </form>
</div>

 

2. JavaScript 로 FormData 객체를 만든뒤, append 로 파일을 추가해준다

fileInput 에 파일 객체를 참조해 온 다음, fileInput.files[0] 으로 파일을 지정해준다.

let fileInput = document.getElementsByName("userfileC")[0];
let file = fileInput.files[0];
data.append('file', file)

아래는 전체 코드

// 백엔드로부터 프로젝트 리스트를 가져와 리턴하는 함수
let projectCreateSubmit = () => {
    // 방명록 데이터 추가를 위한 데이터 생성
    let data = new FormData;
    data.append('name', document.getElementsByName("nameC")[0].value);
    data.append('description', document.getElementsByName("descriptionC")[0].value);
    
    let fileInput = document.getElementsByName("userfileC")[0];
    let file = fileInput.files[0];
    data.append('file', file)

    // 방명록 추가를 위한 ajax 요청을 위해 xhr 객체 생성
    let xhrCreate = new XMLHttpRequest;

    // Post 메서드로
    // guestbook-create.php 파일(접속하려는 대상)에
    // 비동기=true 방식으로 접근하겠다는 요청
    xhrCreate.open('POST', url + "project-create.php", true);

    // onload 는 ajax 요청이 완료되면 실행되는 함수
    // onreadystatechanged 를 사용하기도 한다.
    xhrCreate.onload = function () {

        // status 는 HTTP 통신의 결과를 의미하며,
        // 200 은 통신이 성공했다는 의미
        if (this.status == 200) {

            var result = this.response;

            console.log(result);

        } else {
            alert("ERROR LOADING FILE!"+this.status);
        }
    };
    // 서버에 ajax 요청을 보냄. send() 의 파라미터 값에 원하는 데이터를 전송할 수 있음음
    xhrCreate.send(data);
}

 

3. php 로 파일을 변환하여 db 에 저장한다

<?php

if(!isset($_FILES['file']))
{
    echo '<p>Please select a file</p>';
}else {
    try {
        upload();
        /*** give praise and thanks to the php gods ***/
        echo '<p>Thank you for submitting</p>';
    } catch (Exception $e) {
        echo '<h4>' . $e->getMessage() . '</h4>';
    }
}

function upload()
{
    /*** check if a file was uploaded ***/
    if (is_uploaded_file($_FILES['file']['tmp_name']) && getimagesize($_FILES['file']['tmp_name']) != false) {
        /***  get the image info. ***/
        $size = getimagesize($_FILES['file']['tmp_name']);
        /*** assign our variables ***/
        $type = $size['mime'];
        $imgfp = fopen($_FILES['file']['tmp_name'], 'rb');
        $name = $_FILES['file']['name'];
        $maxsize = 99999999;


        /***  check the file is less than the maximum file size ***/
        if ($_FILES['file']['size'] < $maxsize) {
            /*** connect to db ***/
            $dbh = new PDO("mysql:host=127.0.0.1;dbname=test_db", 'root', 'root-password');

            /*** set the error mode ***/
            $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

            /*** our sql query ***/
            $stmt = $dbh->prepare("INSERT INTO project_data (name ,description, image, image_type, image_name) VALUES (?, ? ,?, ?, ?)");

            /*** bind the params ***/
            $stmt->bindParam(1, $_REQUEST['name']);
            $stmt->bindParam(2, $_REQUEST['description']);
            $stmt->bindParam(3, $imgfp, PDO::PARAM_LOB);
            $stmt->bindParam(4, $type);
            $stmt->bindParam(5, $name);

            /*** execute the query ***/
            $stmt->execute();
        } else {
            /*** throw an exception is image is not of type ***/
            throw new Exception("File Size Error");
        }
    } else {
        // if the file is not less than the maximum allowed, print an error
        throw new Exception("Unsupported Image Format!" + $_FILES['file']);
    }
}