Javascript - 업로드 파일 용량 제한 하여 값 반환하는 코드

한 페이지에서 2개의 파일을 올리는 경우 

2개의 파일의 총합이 20MB를 넘지 않도록 한다.

 HTML 

<tr>
    <th><span id="type_text2"> 업로드</span></th>
    <td>
        <!-- ... (기존 코드) ... -->
        <div class="fileWrap">
            <span> 이미지</span>
            <input type="file" class="txt" name="bf_file_image" onchange="checkTotalFileSize()" />
            <!-- ... (기존 코드) ... -->
        </div>
        <div class="fileWrap">
            <span> 설명서</span>
            <input type="file" class="txt" name="bf_file_description" accept=".hwp" onchange="checkTotalFileSize()" />
            <!-- ... (기존 코드) ... -->
        </div>
        <!-- ... (기존 코드) ... -->
    </td>
</tr>

 파일의 용량 합이 20971520 바이트를 초과하지 않도록 코드를 작성해야한다 

대략 20mb이다

 자바스크립트 코드에서는 두 개의 파일 입력란(작품 이미지와 작품 설명서)에 각각 name 속성을 지정해주었습니다. 이렇게 하면 checkTotalFileSize() 함수가 호출될 때 두 파일의 용량을 각각 확인할 수 있습니다.

함수 checkTotalFileSize()는 두 파일의 용량 합계를 계산하고, 합계가 최대 크기인 20971520 바이트를 초과하면 경고를 띄우고 파일 선택을 취소합니다. 경고 메시지에는 최대 허용 크기 합계인 20MB가 표시됩니다. 모든 파일 입력란에 대해 용량 합계를 계산한 후, 합계를 비교하여 경고를 표시하고 필요한 경우 파일 선택을 취소합니다.

<script>
    // JavaScript 부분
    function checkTotalFileSize() {
        const maxTotalFileSize = 20971520; // 최대 허용 파일 용량 합계 (약 20MB)
        const fileInputs = document.querySelectorAll('input[type="file"]');
        let totalFileSize = 0;

        for (const input of fileInputs) {
            const file = input.files[0];
            if (file) {
                totalFileSize += file.size;
            }
        }

        if (totalFileSize > maxTotalFileSize) {
            const totalSizeInMB = (totalFileSize / (1024 * 1024)).toFixed(2);
            alert(`작품 이미지 파일과 작품 설명서 파일의 용량 합이 ${totalSizeInMB}MB를 초과합니다. 최대 허용 크기 합은 20MB입니다.`);
            // 파일 선택 취소
            for (const input of fileInputs) {
                input.value = '';
            }
        }
    }
</script>