JAVASCRIPT&JQUERY
자바스크립트 JSP에서 파일 이미지 미리보기 구현
9400
2023. 2. 18. 20:04
<form action="/create" method="post" enctype="multipart/form-data">
<!-- 폼데이터 -->
<div class="imgs_wrap"></div>
<p>제목 : <input type="text" name="title" required /></p>
<p>카테고리 :<input type="text" name="category" required /></p>
<p>가격 :<input type="number" name="price" required /></p>
<p>내용 : <textarea name="cont" rows="5" cols="30"></textarea>
<p>
책표지 : <input type="file" id="input_imgs" name="uploadfile" multiple />
</p>
<p>
<input type="submit" value="저장" />
<input type="button" value="목록 " />
</p>
</form>
<div class="imgs_wrap"></div> //이미지를 넣을 공간
책표지 : <input type="file" id="input_imgs" name="uploadfile" multiple /> //이미지 업로드 INPUT태그
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(function(){ //펑션
$('#input_imgs').on('change',handleImgFileSelect);
function handleImgFileSelect(e) {//e는 event
let files = e.target.files;
//이미지배열
let fileArr = Array.prototype.slice.call(files);
fileArr.forEach(function(f){
//이미지만 가능
if(!f.type.match("image.*")){
alert("이미지 확장자만 가능합니다.");
return;
}
//이미지를 읽을 객체
let reader = new FileReader();
// reader.onlad ==> 읽기가 완료되었을때
reader.onload = function(e){
let img_html = "<img src=\""+e.target.result+ "\"style='width:30%' />";
$('.input_img').append(img_html);
}
//이미지를 읽자
reader.readAsDataURL(f);
});
}
});
</script>
</head>
<body>
<div class="input_img"></div>
<hr />
<input type="file" id="input_imgs" name="uploadfile" multiple />
</body>
</html>Array.prototype.slice.call(arguments)
--> 자바스크립트 배열 객체 반환
- slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.
Array.prototype.slice.call()을 사용하면 배열로 바뀌게 됩니다.
* Array -> 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.
* Array.prototype -> Array객체의 메서드를 prototype을 통하여 가져옵니다.
* Array.prototype.slice() -> begin부터 end까지 얕은 복사로 배열 객체를 반환합니다.
ForEach 메서드란?
--> 자바스크립트 배열에서 사용하는 반복문
forEach() 메서드는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다.
map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점이다.
FileReader란?
FileReader() 객체를 사용하여 비동기적으로 파일의 내용을 읽어들일 수 있음.
웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File혹은 Blob객체를 이용해
파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 한다.
