반응형
File
File API
- 로컬의 파일의 정보나 내용을 가져오기 위한 API.
- 파일 API가 나오기 전에는 파일의 정보나 내용을 자바스크립트로 읽어서 다루지 못했습니다.
- input type="file"
File 객체
-
FileReader
메서드
readAsDataURL(blob) : DataURL형식으로 파일을 읽습니다.
이벤트 핸들러
onload : 읽기에 성공했을 경우 실행되는 이벤트 핸들러
프로퍼티
result : 읽기 결과가 저장
Formdata
formdata 객체
키와 값의 쌍으로 폼 name 속성은 value에 접근할 때 필요합니다.
ie9 이하는 작동되지 않습니다. -> ajaxform 으로 대체합니다.
파일업로드 처리 (ajax와 formdata)
html
- file 폼 onchange -> readUrl (이미지 미리보기)
javascript
- readUrl 처리
- 업로드 버튼 -> 폼데이터 객체생성 -> 폼데이터 이미지넣기 -> ajax 설정 및 전송
php
- ajax로 전송된 데이터 처리
CORS
교차 출처 리소스 공유 (Cross-Origin Resource Sharing)
브라우저는 기본적으로 다른 곳에서 http요청을 보안상의 이유로 제한합니다. 다른 출처(Origin)의 리소스를 불러오려면 올바른 CORS헤더를 포함한 응답을 반환해야만 합니다.
관련포스트
반응형
'웹 개발 > 워드프레스' 카테고리의 다른 글
| 워드프레스 | 자바스크립트와 제이쿼리 AJAX (0) | 2020.11.02 |
|---|---|
| 워드프레스 테마 | 2개 테마 병행 설치와 차일드 테마 설치 (0) | 2020.10.29 |
| 워드프레스 | 관리자 화면 간단하게 정리 (0) | 2020.10.28 |
| 워드프레스 테마 | AVADA Theme (0) | 2020.10.28 |
| APP | 데이터 복구 관련 (0) | 2020.09.15 |
| 워드프레스 | 사이트 만들기 (0) | 2020.08.27 |
| 워드프레스 | MAMP에 설치 (0) | 2020.01.21 |
| 워드프레스 | 폴더 구조 (0) | 2019.12.30 |
댓글