728x90 반응형 파일업로드4 폼 데이터와 함께 파일 업로드 (다중 파일 선택창 & 다중 파일 선택) 하나의 파일 선택창에서 여러 개의 파일을 선택해서 업로드하는 기능을 확장해서 여러 개의 파일 선택창에서 여러 개의 파일을 선택해서 업로드하는 기능을 구현합니다. 단일 파일 선택창에서 다중 선택한 파일 업로드 기능은 아래 내용을 참고하세요. https://myanjini.tistory.com/entry/%ED%8F%BC-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%99%80-%ED%95%A8%EA%BB%98-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C 폼 데이터와 함께 파일 업로드 사용자 아이디, 이름, 이메일과 첨부파일을 입력받아서 서버로 전달하면, 서버는 지정된 경로에 첨부파일을 저장하고, 전달받은 값과 첨부파일 정보를 이름 : 값 형식으로 반환하는 예.. 2023. 4. 12. 폼 데이터와 함께 파일 업로드 사용자 아이디, 이름, 이메일과 첨부파일을 입력받아서 서버로 전달하면, 서버는 지정된 경로에 첨부파일을 저장하고, 전달받은 값과 첨부파일 정보를 이름 : 값 형식으로 반환하는 예제입니다. 프론트엔드 (리액트) 화면 구성 return ( ID: NAME: EMAIL: FILES: 업로드 ); 각각의 정보를 입력하는 입력창에 value 속성의 값으로 상태 변수를 지정하고, onChange 이벤트가 발생했을 때 동작할 이벤트 핸들러 함수를 지정합니다. 파일 선택창에는 여러 개의 파일을 선택할 수 있도록 multiple 속성을 지정하고, 이미지 파일을 선택할 수 있도록 accept="image/*" 속성을 지정합니다. 입력창 데이터를 관리할 상태 변수 및 이벤트 핸들러 함수 정의 const [userId, se.. 2023. 2. 21. 20230106 실습내용 블로그 & 뉴스 스타일 페이지 연동 t_topic 테이블 / 특집 기사 연동 t_table 테이블에 데이터를 추가하고, t_topic 테이블에 최신 데이터를 읽어와서 특집 기사 항목을 출력하고, 특집 기사를 클릭하면 해당 내용이 메인에 출력되도록 수정 t_topic 등록 기능 추가 기사 제목, 내용 추가 파일 업로드 기능 추가: 업로드 파일을 서버의 c:\java\upload 디렉터리에 저장하고 파일 경로를 topicImage 컬럼에 저장 파일 다운로드 기능 추가 t_topic 테이블에 저장된 topicImage 컬럼의 파일을 읽어서 응답으로 반환 TODO 기사 등록 시 카테고리를 선택하고, 선택한 카테고리 정보를 테이블에 저장 2023. 1. 6. POST 방식으로 S3 버킷에 파일 업로드 #2 API Gateway 설정 #1 s3-policy-document 리소스 생성 #2 메소드 생성 #3 CORS 활성화 #4 API 배포 업로드 버킷 CORS 설정 [참고] docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/cors.html 24-Hour-Video 웹 사이트에 파일 업로드 기능 추가 [참고] docs.aws.amazon.com/AmazonS3/latest/API/sigv4-UsingHTTPPOST.html C:\serverless\24-hour-video\js\upload-controller.js 파일 생성 var uploadController = { data: { config: null }, uiElements: { uploadBut.. 2020. 11. 4. 이전 1 다음 728x90 반응형
