Today I learned
- AJAX를 이용한 파일 저장
- flash를 이용한 alert
AJAX를 이용한 파일 저장
프로필을 작성할 때 이미지 파일을 받아서 같이 저장을 하는 부분에서 파일 저장의 기능이 필요했다
그러기 위해서는 HTML form에서 한 가지 추가해야하는 속성이 있었다
enctype속성을 넣어서 multipart/from-data를 사용하는 것이다
enctype="multpart/from-data"로 사용하면 된다 이 속성을 사용하는 이유는 파일(<input type="file">)
이 포함된 form을 전송하고 싶을 때 사용한다
그리고 HTML5에서는 <form>태그를 이용해서 input값을 서버에 전송을 하지만 자바스크립트에서는 FormData() 클래스를 이용해서 똑같이 스크립트로 전송할 수 있다
FormData는 HTML단이 아닌 자바스크립트 단에서 폼 데이터를 다루는 객체라고 보면 된다
FormData를 사용하는 이유는 이미지 같은 멀티미디어 파일을 페이지 전환없이 폼 데이터를 비동기로 제출 하고 싶을 때
자바스크립트로 좀 더 타이트하게 폼 데이터를 관리하고 싶을 때 사용한다
FormData를 객체로 만들고 append() 메서드를 사용해 key와 value값을 넣어주면 HTML의 input태그의 값을 입력한 것과 같은 효과를 가진다
ajax부분에서 ajax processdata false, contenttype false 옵션들을 전부 false로 해줘야 한다
이유는 contentType를 false로 설정해 jQuery가 Content-Type 헤더를 추가하지 않도록 하는 것이다 그렇지 않으면
경계 문자열이 누락된다 processData도 false로 설정하지 않으면 jQuery가 사용자 FormData를 준자열로 변환하려고 시도하다가 실패를 한다
코드를 보자
<body>
<!-- file이 포함된 폼이기 때문에 enctype="multipart/form-data" 속성을 사용 -->
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="imageInput">
<input type="text" id="user_name>
</form>
<button class="upload">업로드</button>
<script>
$(".upload").click(function () {
// 파일 input에 들어간 파일들은 files라는 리스트로 저장된다
// input에 multiple을 선언해서 여러개의 파일을 선택하는 경우가 아니면
// files[0]을 받아주자
const imageInput = $("#imageInput")[0];
const name = $("#user_name");
console.log("imageInput: ", imageInput.files);
if (imageInput.files.length === 0) {
alert("파일은 선택해주세요");
return;
}
//formData 객체를 생성 하자
const formData = new FormData();
//formData에 폼 데이터 스크립트를 추가한다
//<input name="file" value="선택한 파일" 이라고 보자
formData.append("file", imageInput.files[0]);
//<input name="name" value="입력한 이름"
formData.append("name", name);
$.ajax({
type: "POST",
url: "/upload",
processData: false,
contentType: false,
data: formData,
success: function (rtn) {
}
})
})
</script>
</body>
flash를 이용한 alert
flask는 메세지 플래싱을 지원한다
메세지 플래싱이란 플래싱 시스템은 기본적으로 요청의 끝에 메세지를 기록하고 그 다음 요청에서만 그 메세지를 접근 할 수 있게 한다 보통은 플래싱을 처리하는 레이아웃 템플릿과 결합되어 사용한다
python코드에서 flash()에 원하는 메세지를 인자로 넘겨준다
그리고 html템플릿에서 jinja의 with문을 사용해서 whth문 범위에서 변수를 설정할 수 있다 flash로 넘겨준 메세지를
get_flashed_messages()를 이용해서 가져온다 가져올때 배열 형식으로 가져와 진다 사용할 때 잘 인덱싱해서 alert창을 보여주자
if "id" not in session:
flash("로그인을 하세요!!")
return render_template("login.html"){% with messages = get_flashed_messages() %}
{% if messages %}
<script type="text/javascript">
alert("{{messages[-1]}}");
</script>
{% endif %}
{% endwith %}
'과거공부모음' 카테고리의 다른 글
| 나의 개발일지 TIL(Today I learned) - 미니프로젝트 (5일) (0) | 2022.12.08 |
|---|---|
| 나의 개발일지 TIL(Today I learned) - 미니프로젝트 (4일) (0) | 2022.12.08 |
| 나의 개발일지 TIL(Today I learned) - 미니프로젝트 (2일) (0) | 2022.12.05 |
| 나의 개발일지 WIL(Weekly I learned) - 데이터베이스, CS기초, 미니프로젝트 시작 (0) | 2022.12.05 |
| 나의 개발일지 TIL(Today I learned) - OSI 7계층 특강, 미니프로젝트 시작 (1일) (0) | 2022.12.02 |