업로드2

• 

  [JavaScript] 자바스크립트로 구현한 멀티파일 업로드와 다운로드 이번에는 화면 측(Front-End)에서 구현된 멀티파트 업로드와 다운로드에 대해서 알아보자. 코드들은 HTML5 기준으로 작성하였다. 웹에서 멀티파일 업로드/다운로드를 구현하려면 별도의 모듈을 사용해야 한다. 하지만 HTML5가 등장하고 나서 HTML과 JavaScript만으로 구현이 가능해졌다. 먼저 멀티파일 업로드를 살펴보자. file 타입의 입력항목에 multiple 속성을 정의하면 기능을 구현할 수 있다. 아래는 멀티파트 업로드 HTML소스다. 멀티파일 업로드 아래는 처음 표시되는 화면이다. 파일선택을 클릭하면 파일선택이 가능한 열기창이 표시된다. 열기에서 1.txt와 2.txt 두 파일을 선택했다. 그리고 버튼을 클릭하면... 아래와 같이 파일선택 버튼 옆에 "파일 2개" 하고 표시된다. 참고.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 이미지 업로드 하기전 표시하기 (ImageViewer ) 아래는 프로필 페이지에서 사진을 업로드 하려고 이미지를 로컬에서 선택할 때 미리보기를 위한 코드이다. 처음엔 기본 이미지로 표시하고 있다가 이미지 파일을 선택을 하면 이미지 올리기 전에 화면에 표시된다. 브라우저 보인문제 이슈로 파일을 선택하면 C:\fakepath에서 찾으려고 한다. fakepath 문제를 해결하려면 "인터넷 옵션" 메뉴를 선택하고 "보안 탭 > 인터넷 > 사용자 지정 수준"을 선택한다. 그리고 중간 아래정도에 위치한 "파일을 서버에 업로드할 때 로컬 디렉토리 경로 포함"을 사용으로 선택한다. 아래는 전체코드이다. 이미지 업로드 : 아래는 처음에 표시되는 화면이다. 파일을 선택하면 바로 화면처럼 선택한 이미지가 표시된다. 이미지는 강제로 가로 225, 세로 225로 하였다. ■ Front-End ■/JavaScript 2023. 2. 28.