URL 객체란?
URL 객체는 디스크의 파일을 가리키는 객체입니다. 사용자가 이미지 또는 pdf와 같은 파일을 선택하여 웹 페이지에 미리보기를 보여줘야 하는 경우 URL 객체를 사용할 수 있습니다.
URL 객체 사용 방법
URL 객체는 전역 객체로 URL 처리를 지원하는 여러 함수가 포함되어 있습니다.
▶ URL 생성
URL 객체의 createObjectURL() 함수를 사용하여 File 또는 Blob 객체를 가리키는 URL을 생성할 수 있습니다. 함수의 인수로 파일 객체를 전달합니다.
File 또는 Blob 객체는 생성된 고유한 URL에 매핑되고 URL.createObjectURL() 함수는 URL을 string으로 반환합니다.
다음 예제는 업로드한 이미지 파일을 표시하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<input type="file" id="fileUpload" />
<img id="preview" />
<script>
const fileInput = document.getElementById("fileUpload");
const preview = document.getElementById("preview");
fileInput.onchange = function (e) {
const selectedFile = fileInput.files[0];
if(selectedFile) {
preview.src = URL.createObjectURL(selectedFile);
}
};
</script>
</body>
</html>input 엘리먼트에서 onchange 이벤트가 발생하면, 선택한 파일을 const selectedFile = fileInput.files[0]으로 읽은 후 URL.createObjectURL() 함수에 변수selectedFile을 전달합니다.
▶ URL 해제
URL.createObjectURL() 함수에 File 또는 Blob 객체를 전달하면 고유한 URL이 생성되는 것을 확인할 수 있었습니다. 그런데, 이 URL은 브라우저가 종료될 때까지 메모리에 계속 남아있어서 메모리 누수를 유발할 가능성이 존재합니다. 더 이상 사용하지 않거나 또는 새로운 파일로 변경하는 경우에는 메모리에서 해제해야 합니다.
URL.createObjectURL() 함수로 생성된 URL을 메모리에서 해제하기 위해서는 URL.revokeObjectURL() 함수를 사용합니다. 함수의 인자로 URL을 전달합니다.
다음은 URL.revokeObjectURL() 함수를 사용하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<input type="file" id="fileUpload" />
<img id="preview" />
<script>
const fileInput = document.getElementById("fileUpload");
const preview = document.getElementById("preview");
var prevURL, currentURL;
fileInput.onchange = function (e) {
URL.revokeObjectURL(prevURL);
const selectedFile = fileInput.files[0];
if (selectedFile) {
currentURL = URL.createObjectURL(selectedFile);
preview.src = currentURL;
prevURL = currentURL;
}
};
</script>
</body>
</html>이전 URL 값은 prevURL 변수로 관리하고 현재 URL 값은 currentURL 변수로 관리합니다. onchange 이벤트가 발생하면 이전 URL 값인 변수 prevURL을 URL.revokeObjectURL() 함수에 전달하여 메모리에서 해지합니다.
onchange 이벤트에서 선택한 파일이 존재하는 경우 currentURL과 prevURL에 값을 재할당합니다.
'JavaScript > JavaScript 문법' 카테고리의 다른 글
| [JavaScript]길이만큼 문자열 자르기 (0) | 2022.03.24 |
|---|---|
| [JavaScript]쿠키(Cookie) 사용 방법 (0) | 2022.02.04 |
| [JavaScript]예외 처리(Exception Handling) (0) | 2022.02.03 |
| [JavaScript]파일 입출력 - FileReader 객체 (0) | 2022.01.25 |
| [JavaScript]파일 업로드 구현 (0) | 2022.01.25 |
댓글