파일(Image) 용량을 확인하는 방법_v1

파일용량을 확인하는 방법을 두가지를 포스팅할 것이다.

사실 더 많을수도 있고, 알게 되면 더 포스팅 할 예정이다.

첫번째로 <input type="file"> 로 확인하는 방법

두번째로 AJAX 로 확인하는 방법

 

1. <input type="file"> 로 확인하는 방법

대부분 클라이언트에서 업로드할 파일의 용량을 제한하기 위해 사용된다.

 

ps. 본인은 img.src 를 통해 load된 이미지의 크기들을 DOM으로 가져오고 싶었다. 1번 방법아님.

 

1-1. html

<div>
	<input type="file" accept=".jpg, .jpeg, .png, .gif" id="inputFile" multiple>
	<div id="resultFile"></div>
</div>

1-2. javascript

const inputFile = document.querySelector('#inputFile');
const resultFile = document.querySelector('#resultFile');

inputFile.addEventListener('change', function(e) {
    return readURL(this)
}, false);

const readURL = input => {

    // 선택된 파일이 없으면 함수 종료
    if (!(input.files)) return
    
    // 결과창 초기화
    resultFile.innerHTML = "";
    
    // 선택된 파일만큼 반복
    for (let i = 0; i < input.files.length; i++) {
        
        //File정보를 읽을 수 있는 FileReader 호출
        const reader = new FileReader();
		
        //File 불러오기가 끝나면 실행될 함수
        reader.onload = function(e) {
            const img = new Image();
            
            // image파일의 blob 이 생성됨. blob -> 바이너리 오브젝트
            img.src = e.target.result
            
            // 생성된 데이터를 템플릿 문자열에 넣어준다.
            return resultFile.innerHTML +=
                `
                <dl>
                    <dt>${img.outerHTML}</dt>
                    <dd>${input.files[i].name}</dd>
                    <dd>${Math.round((input.files[i].size/1024)) + 'kb'}</dd>
                </dl>
                `;
        }
		
        // readAsDataURL은 Blob, File 을 읽을 수 있다.
        reader.readAsDataURL(input.files[i]);
    }
}

 

2. AJAX 로 확인하는 방법

AJAX로 이미지주소에 있는 이미지를 불러오면, ResponseHeader 객체가 생성되는데

여러 키값중 Content-Length 키, byte 값으로 이미지의 크기가 저장되어있다.

그러니 getResponseHeader()로 Content-Length를 가져오면 된다.

 

더 중요한 것은 

obj = URL.createObjectURL(Blob) 을 통해 생성된 URL객체는 

window.URL.revokeObjectURL(obj)를 통해 해제해주어야 가비지콜렉터가

폐기된 정보를 수거해간다.

 

ps. 본인은 img.src 를 통해 load된 이미지의 크기들을 DOM으로 가져오고 싶었다.  2번도 아님.

 

2-1. html

<div>
    <input type="button" value="ajax 조회" id="callRequest">
    <div id="resultRequest"></div>
</div>

2-2. javascript

const resultRequest = () => {
		// 배열로 되어 있는 이미지의 주소
        const arrImages = [
            './images/image01.jpg',
            './images/image02.jpg',
            './images/image03.jpg'
        ]
        
        // selector
        const resultRequest = document.querySelector('#resultRequest');
        
        // 결과값 초기화
        resultRequest.innerHTML = "";
		
        // request 함수 시작
        const request = url => {
        
        	// XMLHttpRequest 호출
            const xhr = new XMLHttpRequest();
            
         	// 어떻게 가져올건지? 어디서 가져올건지? 비동기로 가져올건지?
            xhr.open('get', url, true);
            
            // responseType은 Blob 으로 가져온다. Blob === 바이너리 오브젝트
            xhr.responseType = "blob"
            
            // xhr의 상태값이 변했을 때
            xhr.onreadystatechange = () => {
                // 연결실패시 함수종료
                if (xhr.readyState !== 4) return;
                
                // 연결성공시 
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const blob = xhr.response
                    
                    // URL.createObjectURL 은 blob 정보를 읽는다.
                    const objectURL = URL.createObjectURL(blob);
                    
                    // image에 Image객체를 호출
                    const image = new Image()
                    
                    // image의 src에 objectURL 할당
                    image.src = objectURL

                    resultRequest.innerHTML += '<p>' + image.outerHTML + '<br/>' +
                    	// getResponseHeader는 response 정보를 가져온다.
                        // Content-Length는 response header에 있으며, 
                        // FileSize가 byte단위로 담겨져있다.
                        Math.round(xhr.getResponseHeader('Content-Length') / 1024) + 
                        'kb </p>';
					
                    // 생성된 URL.createObjectURL을 해제하면 가비지컬렉터에서 수거해간다.
                    // setTimeout을 안할 경우 오류를 일으키는데 코드가 아래에 있어도
                    // 브라우저의 렌더링 과정에서 우선순위인 것 같다. 자세히 알아봐야함
                    const revoke = setTimeout(function() {
                        window.URL.revokeObjectURL(objectURL)
                        console.log('revoke')
                    }, 1000)
                }
            }
            xhr.send();
        }
		
        //이미지 갯수만큼 request 반복실행
        for (let i = 0; i < arrImages.length; i++) {
            request(arrImages[i])
        }
    }

    document.querySelector('#callRequest').addEventListener('click', resultRequest, false);

 

생각해본 것

3. cookie 나 cache에 접근하여 저장되어 있는 img의 size를 알 수있지않을까?(현재 이미지 이름만 출력가능한 상태)

4. 로드된 이미지들은 파일 생성자를 상속받는 인스턴스를 만들어 파일객체로 만들어본다?

5. 잠온다... 일단 자야지...