R

html javascript 대용량 파일 업로드 구현

· 2024-09-26 (목) 12:33:55 · 3523 · 9

분할방식의 업로드 샘플코드입니다.

서버의 업로드 1회 업로드 용량 제한에도 대응하는 코드로,

디테일을 구현하면 이어 올리기 등 또한 구현 가능합니다.

필요하신분들 참고하세요.

눈으로만 검수한 코드라 디버깅이 필요할 수 있습니다.

php

[code]

<?php

 

// 파일 업로드 처리

if (isset($_FILES['file'])) {

    $file = $_FILES['file'];

 

    // 파일 크기

    $fileSize = $file['size'];

 

    // 분할 크기 (예: 10MB)

    $chunkSize = 10 * 1024 * 1024;

 

    // 분할된 청크 수

    $numChunks = ceil($fileSize / $chunkSize);

 

    // 임시 디렉토리 생성

    $tempDir = sys_get_temp_dir() . '/file-upload';

    if (!file_exists($tempDir)) {

        mkdir($tempDir, 0777, true);

    }

 

    // 파일 분할

    for ($i = 0; $i < $numChunks; $i++) {

        // 분할된 청크 시작 바이트

        $startByte = $i * $chunkSize;

 

        // 분할된 청크 끝 바이트

        $endByte = min($fileSize, $startByte + $chunkSize - 1);

 

        // 분할된 청크 읽기

        $chunk = fopen($file['tmp_name'], 'rb');

        fseek($chunk, $startByte);

        $chunkData = fread($chunk, $chunkSize);

        fclose($chunk);

 

        // 분할된 청크 저장

        $chunkFile = fopen($tempDir . '/chunk-' . $i, 'wb');

        fwrite($chunkFile, $chunkData);

        fclose($chunkFile);

    }

 

    // 분할된 청크 정보 저장

    $chunkInfo = array();

    for ($i = 0; $i < $numChunks; $i++) {

        $chunkInfo[] = array(

            'name' => 'chunk-' . $i,

            'size' => filesize($tempDir . '/chunk-' . $i)

        );

    }

 

    // 분할된 청크 정보 JSON으로 출력

    echo json_encode($chunkInfo);

}

 

[/code]

 

html & javascript

[code]

<script>

 

const form = document.getElementById('file-upload-form');

const progressBar = document.getElementById('progress-bar');

 

// 파일 선택 이벤트

form.addEventListener('change', (event) => {

    // 업로드할 파일 가져오기

    const file = event.target.files[0];

 

    // 파일 크기

    const fileSize = file.size;

 

    // 분할 크기 (예: 10MB)

    const chunkSize = 10 * 1024 * 1024;

 

    // 분할된 청크 수

    const numChunks = Math.ceil(fileSize / chunkSize);

 

   //코드 일부 삭제

 

    // 파일 분할

    for (let i = 0; i < numChunks; i++) {

        // 분할된 청크 시작 바이트

        const startByte = i * chunkSize;

 

        // 분할된 청크 끝 바이트

        const endByte = Math.min(fileSize, startByte + chunkSize - 1);

 

        // 분할된 청크 읽기

        const chunk = file.slice(startByte, endByte + 1);

 

        // 분할된 청크 저장

        const chunkFile = new File([chunk], 'chunk-' + i, {

            type: file.type

        });

 

        // 분할된 청크 업로드

        uploadFile(chunkFile);

    }

});

 

// 파일 업로드 함수

function uploadFile(file) {

    // FormData 객체 생성

    const formData = new FormData();

 

    // 파일 추가

    formData.append('file', file);

 

    // AJAX 요청 생성

    const xhr = new XMLHttpRequest();

 

    // 업로드 진행 이벤트

    xhr.upload.addEventListener('progress', (event) => {

        // 업로드 진행률 계산

        const progress = (event.loaded / event.total) * 100;

 

        // 진행률 표시줄 업데이트

        progressBar.style.width = `${progress}%`;

    });

 

    // 서버 응답 이벤트

    xhr.addEventListener('load', (event) => {

        // 업로드 상태 가져오기

        const status = JSON.parse(event.target.response);

 

        // 업로드 상태 표시

        console.log(`파일: ${status.name}, 크기: ${status.size}, 상태: ${status.status}`);

    });

 

    // 요청 보내기

    xhr.open('POST', 'upload.php');

    xhr.send(formData);

}

 

</script>

 

<form id="file-upload-form"></form>

    <input type="file">

    <button type="submit">업로드</button>

</form>

 

<div id="progress-bar"></div>

[/code]

|

댓글 9개

공유 감사합니다!

아직은 적용할만한 곳은 없지만 쓸 기회가 생긴다면 공유해주신 코드를 참고해서 작업해볼게요!

수고하셨습니다 ^^

자바스크립트에서 필요없는 코드 같습니다.

// 임시 디렉토리 생성
const tempDir = sys_get_temp_dir() + '/file-upload';
if (!file_exists(tempDir)) {
    mkdir(tempDir, 0777, true);
}

@티로그 그렇겠네요. 수정하였습니다.

2024-10-12 (토) 09:44:22

감사합니다 ^^

2024-10-15 (화) 11:35:53

감사합니다

오... 좋은 정보 감사합니다.

감사합니다.

감사합니다.

댓글을 작성하시려면 로그인이 필요합니다.

영카트5 팁자료실

455건
+
제목 글쓴이 날짜 조회
25-09-03 조회 1,632
25-08-26 조회 1,948
25-08-18 조회 1,997
25-08-16 조회 1,688
25-08-07 조회 1,802
25-07-31 조회 1,709
25-07-28 조회 1,826
25-07-24 조회 1,779
25-07-21 조회 1,752
25-07-14 조회 1,570
25-07-08 조회 1,821
25-07-01 조회 1,789
25-06-24 조회 1,805
25-06-05 조회 1,663
25-06-04 조회 1,391
25-04-08 조회 1,944
25-04-08 조회 1,601
25-03-24 조회 1,607
25-01-20 조회 2,120
24-12-31 조회 2,136
24-12-28 조회 1,598
24-10-24 조회 2,370
24-10-22 조회 1,792
24-10-21 조회 1,904
24-09-26 조회 3,524
24-09-18 조회 2,558
24-08-26 조회 4,067
24-08-23 조회 1,797
24-07-22 조회 4,551
24-07-18 조회 2,370