파일용량을 확인하는 방법을 두가지를 포스팅할 것이다.
사실 더 많을수도 있고, 알게 되면 더 포스팅 할 예정이다.
첫번째로 <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. 잠온다... 일단 자야지...