AJAX와 jQuery를 활용한 HTML5 파일 업로드 구현 방법

HTML5의 File API와 jQuery의 AJAX 기능을 조합하면 페이지를 새로고침하지 않고도 파일을 비동기적으로 업로드할 수 있습니다. 아래에서는 클라이언트 측과 서버 측 처리 과정을 단계별로 살펴보겠습니다.

1. 클라이언트 측: 폼 제출 시 파일 읽기

사용자가 폼을 제출하면 기본 제출 동작을 가로채고, 다음 코드 스니펫을 실행하여 파일을 업로드합니다.

// File 1
var myFile = document.getElementById('fileBox').files[0];
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = myFunc;

function myFunc(event) {
    var res = event.target.result;
    var fileName = document.getElementById('fileBox').files[0].name;
    $.post('/myscript.php', { data: res, name: fileName }, continueSubmission);
}

코드 설명

FileReader 객체는 선택된 파일의 내용을 텍스트(UTF-8 인코딩)로 읽어 들입니다. 파일 읽기가 완료되면 onload 이벤트 핸들러인 myFunc가 실행되며, 이 함수는 읽어온 파일 내용(res)과 원본 파일명(fileName)을 $.post()를 통해 서버의 /myscript.php로 전송합니다. 업로드가 완료되면 콜백 함수 continueSubmission이 호출되어 후속 작업을 이어갈 수 있습니다.

2. 서버 측: PHP로 업로드된 데이터 저장

서버 측 스크립트(myscript.php)에서는 전송받은 데이터를 받아 파일로 저장합니다.

$data = $_POST['data'];
$fileName = $_POST['name'];
$myServerFile = time().$fileName;

// Prevent overwriting
$fp = fopen('/uploads/'.$myServerFile,'w');
fwrite($fp, $data);
fclose($fp);
$retData = array( "myServerFile" => $myServerFile );
echo json_encode($retData);

코드 설명

POST로 전달된 파일 내용과 파일명을 각각 변수에 담은 뒤, time() 함수로 생성한 타임스탬프를 파일명 앞에 붙여 파일명 중복으로 인한 덮어쓰기를 방지합니다. 이후 fopen(), fwrite(), fclose()를 사용해 /uploads/ 디렉터리에 파일을 저장하고, 최종 저장된 파일명을 JSON 형태로 클라이언트에 응답하여 업로드 결과를 확인할 수 있게 합니다.

마무리

이 방식은 FormData 없이 FileReader로 파일 내용을 직접 읽어 전송하는 접근법으로, 텍스트 기반 파일(CSV, TXT 등) 업로드에 적합합니다. 이미지나 바이너리 파일을 다룰 때는 readAsDataURL() 또는 FormData 객체를 활용하는 것이 좋습니다. 또한 실제 운영 환경에서는 업로드 경로 권한 설정, 파일 크기 제한, 확장자 검증 등 보안 처리를 반드시 함께 적용해야 합니다.