본문 바로가기

Development/Web & Server

Image 선택후 사이트에 로딩하기

스프링에서 간단히 데이터를 입력이 필요해져서 간단히 만들어보았다.


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>


<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>${title}</title>

<script src="http://code.jquery.com/jquery.js"></script>

</head>


<body>

<header><h1>${title}</h1></header>


<form method="post" enctype="multipart/form-data">

<fieldset>

<table>

<tr height="50">

<th>Name</th>

<td><input type="text" name="name" required="required" placeholder="name"></td>

</tr>

<tr height="50">

<th>ImageFile</th>

<td><img id="image_view" width = 200> <br/> <input type="file" name="imageFile" required="required" onchange="fileSelect(this);" > </td>

</tr>

<tr>

<td colspan="1">

<input type="submit" value="올리기">

</td>

</tr>

</table>

</fieldset>

</form>

<script>

function fileSelect(input) {

if (input.files[0] && input.files) {

var reader = new FileReader();

reader.onload = function (e) {

$('#image_view').attr('src', e.target.result);

};

reader.readAsDataURL(input.files[0]);

}//end if

}//end fileChange Method

</script>

</body>

</html>