파일 업로드 하는 방식을 확실히 짚고 넘어가고 싶어서 쌤이 주신 문서를 하나하나 되짚어 보자.
일단 먼저 궁굼했던 것은 '찾아보기' 라는 버튼을 만들지 않았는데 자동으로 생기는 이유가 뭘까?
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<form action="BBB.jsp" method="post" enctype="multipart/dorm-data">
<input type="hidden" name="num" vlaue="7789">
제목 : <input type="name="title" value="snow"><br>
파일 : <input type="file" name="file1" id="file" onchange="handleFileSelect()">
</form>
<div id="preview"></div>
</body>
</html>이렇게만 작성하고 run 을 했는데
'찾아보기' 라는 버튼이 뜨는걸 보니까 onchange="handleFileSelect()" 라는 이벤트를 적용해서 그런거 같다.
onchange 란 ? 파일이 변경되면 선택하는 항목이 변경이되었을 때 작용하는 이벤트
눌렀을 때 파일 찾게 도와주는 기능이 이 때문인 것 같다
파일을 업로드 할 때에도 이 옵션은 필수라고 한다. form 에 넣어주기!
enctype="multipart/dorm-data"
[ handleFileSelect() ]
이제 자바스크립트에 handleFileSelect() 함수를 추가해보았다.
이 함수를 추가하니까 한가지 기능이 추가 되었다
<script type="text/javascript">
function handleFileSelect() {
var files = document.getElementById('file').files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var img_view = ['<img src=', e.target.result + ' width="450" height="250" alt="tis" />'].join('');
document.getElementById('preview').innerHTML = img_view ;
};
})(files);
reader.readAsDataURL(files);
}
</script>내가 선택한 파일이 아래에 보여진다.
이게 fome 아래에 있는 <div> 태그 부분에 적용이 되는거겠지 div의 id를 priview 로 줬으니까.
handleFileSelect() 함수에서 이게 적용 되는거겠지 ?
reader (읽는 사람 ) .onload (호출시점:모든 페이지 구성요소 페인팅 완료 후)
흠 읽는게 호출 되었을 때 안에 이름없는 함수를 호출하겠다는건가?
바로 아래 있는 함수는 매개인자를 받는데 그게 (thefile) 이다.
하지만 일의 처리는 안쪽에서 할꺼 같은 기분이다.
제일 안쪽에 있는 function(e) 는 <div id="preview"> 에다가 뭔가를 설정해주는거 같고
그 뭔가는 방금 내가 선택한 파일일꺼 같다.
내가 선택한 파일은 지금 e 로 불리고 있고 e를 타겟으로 정하고 그 값을 src에 담은건가?ㅋㅋㅋ
그리고 그 이미지의 넓이와 높이 속성들을 정의해준다.
ducument.getElementById('preview') ! 이거다!! 여기에 이 이미지를 표시해라.
처음보는 구조의 함수라서 음 신기방기하다
아무튼 이 함수는 이미지를 읽어서 div 에 보여주는 역활을 하는거 같다.
[ previewFiles() ]
이번에 해석한 previewFiles() 함수를 쓰면서는 음 이건 파일명을 체크하는 부분이구나,
라는 생각은 했지만 도저히 previewFile 을 호출하는 부분은 찾을 수가 없었다.
쌤한테 SOS 한 결과,
역시 이 함수는 사용하지 않는다. 참고용으로 넣어주셨다.
내 예상과 같이 정규식을 체크하는 일을 한다.
.txt 같은 함수들이 들어오면 안되니까 조건을 걸어 둔 것이다.
이미지 파일을 오고가는 과정은 특히 꼬와놓은 함수들이 많아서 어색하지만 하나하나 잘 뜯어보자.
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.width = 400;
image.height = 200;
image.src = this.result;
preview.appendChild( image );
}, false );
reader.readAsDataURL(file);
}// 정규식 끝
}
if(files){
[].forEach.call(files, readAndPreview);
}
}
'개발중 > JavaServer Pages (JSP)' 카테고리의 다른 글
| session 사용법 (0) | 2020.08.14 |
|---|---|
| Cookies (0) | 2020.08.14 |
| session (0) | 2020.08.14 |
| WebServlet 시작 (필기) (0) | 2020.08.14 |
| 자료의 이동 (0) | 2020.08.13 |
댓글