반응형
Q>
HTML5 파일 API를 이용하여 사용자가 선택한 이미지 파일을 보여주는 웹 애플리케이션을 작성하여 보자.
이미지는 <img> 태그를 이용하여 HTML 문서 안에서 표시한다.
A>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File API Quiz</title>
<style>
#main {
border: 1px dotted black;
width: 500px;
height: auto;
font-weight: bold;
font-size: 30px;
margin: 20px;
}
img {
width: 200px;
height: auto;
padding: 20px;
}
</style>
</head>
<body>
<div id="main">
이미지 갤러리
</div>
<div id="preview"></div>
<p>이미지 파일을 선택하세요.<input id="browse" type="file" onchange="previewFiles()" multiple></p>
<script>
function previewFiles() {
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.title = file.name;
image.alt = file.name;
image.src = this.result;
preview.appendChild(image);
}, false);
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
}
</script>
</body>
</html>
R>
 |
|
반응형
'Python_WEB > JavaScript' 카테고리의 다른 글
| [Ch16]모바일 웹 페이지 연습문제 2 (0) | 2021.01.04 |
|---|---|
| [Ch16]모바일 웹 페이지 연습문제 1 (0) | 2021.01.04 |
| [Ch14]HTML5 웹 스토리지, 파일 API, 웹 소켓 연습문제 1 (0) | 2021.01.01 |
| [Ch13]HTML5 위치 정보와 드래그와 드롭 연습문제 3 (0) | 2020.12.31 |
| [Ch13]HTML5 위치 정보와 드래그와 드롭 연습문제 2 (0) | 2020.12.31 |
