HTML+CSS+JS+Flask/파일 업로드 기능

DB에 사진 업로드하고 화면에 나타내기

What to do? 이미지 업로더로 이미지를 프로젝트 static 폴더 내에 저장하고 DB에 이미지의 이름, 코멘트, static 폴더에 저장할 이미지의 이름과 확장자를 DB에 저장한 후 이를 이용해서 static 폴더내에 저장된 이미지를 불러와서 화면에 나타내보자! file은 일반 json 형식의 데이터와 다르게 formdata 형식으로 넣어서 보내자! static 폴더에 저장된 이미지 이름이 겹치면 안되므로 이미지 이름을 datetime 함수를 이용해서 날짜-시간으로 저장해주자!! 예시화면 순서 1-1. 클라이언트가 파일을 서버에 보내는 코드를 작성 Tip. 파일을 서버에 보낼때는 일반 JSON 형식의 파일이 아닌 formdata에 데이터를 넣어서 POST 요청으로 보낸다! Tip. 클라이언트가 P..

파일 업로드 / 속성값(jquery)

파일 업로드 파일을 업로드하려면 input 태그에 type 속성을 file로 설정해서 사용할 수 있다! 또한 이미지만 업로드 하는 경우는 accept 속성을 image/*와 같이 설정하면 된다. 만약 image 파일에서 png 확장자만 선택하고 싶다면 accept 속성에 image/png와 같이 설정하면 된다. 속성값 (files) 선택자나 jquery를 이용해서 file input 요소에 접근한 후에 files라는 속성값을 이용해서 파일의 객체를 확인할 수 있다! 여기서는 jquery를 사용해서 해당 파일 객체를 확인하는 방법을 알아보자 아래와 같이 jquery를 임포트하고 file input에 id 값을 주자. 파일을 하나 선택한 후에 콘솔창을 열어보자! $('#file')[0] jquery로 해당 ..