HTML5

이미지 첨부시 미리보기 처리

최강깜시 2015. 7. 6. 16:22

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script src="/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
/**
 * 이미지 썸네일을 불러오는 function
 * @param html : input 필드의 dom을 인자로 받는다. 물론 타입은 file
 * @param $target : 불러온 이미지를 적용할 jquery 객체.
 **/
function getThumbnail(html, $target) {
   if (html.files && html.files[0]) {
       var reader = new FileReader();
       reader.onload = function (e) {
           $target.css('background-image', 'url(\"' + e.target.result + '\")');
       }
       reader.readAsDataURL(html.files[0]);
   }
}

</script>
<input type="file" id="file" name="file" onchange="getThumbnail(this,$('#image'))" />
<div id="image" style="width: 300px; height: 300px; border: 1px solid #000000"></div>
</body>
</html>