2015. 7. 6. 16:22ㆍHTML5
<!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>
'HTML5' 카테고리의 다른 글
| Websocket를 통한 Chat (0) | 2015.07.08 |
|---|---|
| XMLHttpRequest level2를 사용하기 위한 Tomcat7 CORS 설정 (0) | 2015.06.01 |
| 지오로케이션 API 사용하기 (0) | 2015.05.29 |