쌍용 강북 교육센터 국비학원 Day 77일차
※ 선택자를 잡을때 선택자가 <body> 태그에 직접 기술한 것이라면 선택자를 제대로 잡을수가 있으나 스크립트내에서 (함수, jQuery로) 기술한 것이라면 선택자를 못 잡아올수도 있다. 이러한 경우는 이벤트 처리는 아래와 같이 해야한다.
$(document).on( "이벤트종류", "선택자", function ( ) { } ); 으로 한다.
다음은 이미지를 업로드 하기 위해 input 태그에 이미지를 선택하면 해당 이미지의 미리보기를 띄워주는 예제이다.
$(document).on("change", "input.img_file", function(e) {
const input_file = $(e.target).get(0);
jQuery선택자.get(0) 은 jQuery 선택자인 jQuery Object 를 DOM (Document Object Model) element 로 바꿔주는 것이다. DOM element 로 바꿔주어야 순수한 javascript 문법과 명령어를 사용할 수 있게 된다.
console.log(input_file.files);
- console 출력값 -
FileList {0: File, length: 1}
0: File {name: 'berkelekle심플라운드01.jpg', lastModified: 1605506138000, lastModifiedDate: Mon Nov 16 2020 14:55:38 GMT+0900 (한국 표준시), webkitRelativePath: '', size: 71317, …}
length: 1
[[Prototype]]: FileList
파일이름을 선택한 후, file input 엘리먼트의 files 프로퍼티를 출력해보면, 위와 같이 FileList 라는 객체가 출력되는 것을 볼 수 있다. FileList 객체 프로퍼티(키)는 0,1 … 형태의 숫자로, 그리고 값에는 File 객체가 들어있다.
file input 엘리먼트의 files 프로퍼티의 값이 FileList 로 되어있으므로 File 객체에 접근하려면 input_file.files[i] 이런 식으로 사용하여 i 번째의 File 객체에 접근을 한다.
console.log(input_file.files[0]);
- console 출력값 -
File {name: 'berkelekle심플라운드01.jpg', lastModified: 1605506138000, lastModifiedDate: Mon Nov 16 2020 14:55:38 GMT+0900 (한국 표준시), webkitRelativePath: '', size: 71317, …}
- name : 단순 파일의 이름 string타입으로 반환 (경로는 포함하지 않는다.)
- lastModified : 마지막 수정 날짜 number타입으로 반환 (없을 경우, 현재 시간)
- lastModifiedDate: 마지막 수정 날짜 Date객체타입으로 반환
- size : 64비트 정수의 바이트 단위 파일의 크기 number타입으로 반환
- type : 문자열인 파일의 MIME 타입 string타입으로 반환
- MIME 타입의 형태는 type/subtype 의 구조를 가지며, 다음과 같은 형태로 쓰인다.
text/plain
text/html
image/jpeg
image/png
audio/mpeg
video/mp4
...
console.log(input_file.files[0].name);
- 이렇게 해당 이미지의 이름을 가져올 수 있다.
const fileReader = new FileReader();
File 객체의 실제 데이터(내용물)에 접근하기 위해 FileReader 객체를 생성하여 사용한다.
fileReader.readAsDataURL(input_file.files[0]);
FileReader.readAsDataURL() --> 파일을 읽고, result속성에 파일을 나타내는 URL을 저장 시켜준다.
fileReader.onload = function() {
// FileReader.onload --> 파일 읽기 완료 성공시에만 작동하도록 하는 것임.
console.log(fileReader.result);
//data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAg
이러한 형태로 출력되며, img.src 의 값으로 넣어서 사용한다.
document.getElementById("previewImg").src = fileReader.result;
};
});
※ form에서 파일을 업로드 하려면 반드시 method 는 POST 이어야 하고 enctype="multipart/form-data" 으로 지정해주어야 한다.
'Web > JSP' 카테고리의 다른 글
| Ajax XMLHttpRequest 사용해 GET, POST 방식 데이터 전송방법 (0) | 2023.05.08 |
|---|---|
| 쌍용강북교육센터 국비 학원 Day 78일차 JSP (input 태그 파일 업로드) (0) | 2023.04.24 |
| 쌍용강북교육센터 국비 학원 Day 73일차 JSP (페이징 처리, Paging) (0) | 2023.04.17 |
| 쌍용강북교육센터 국비 학원 Day 70일차 JSP (radio index 이벤트, 팝업창 함수호출, 결제창 로직구현) (0) | 2023.04.12 |
| 쌍용강북교육센터 국비 학원 Day 69일차 JSP (Modal 값 초기화, reload, 이메일 인증코드 구현) (0) | 2023.04.11 |
