JavaScript를 사용하여 이미지 파일을 선택할 때 미리 보기 표시하는 방법

이 보도에 관하여

본고는 JavaScript 디스플레이<input type="file"> 요소를 사용하여 선택한 이미지 파일의 미리 보기 방법을 소개합니다.소스 코드이 글의 페이지는 다운로드할 수 있고, 결과는 데모에서 확인할 수 있다.

대략적인 절차

대략적인 절차는 아래와 같다.

인코딩

동작 확인

부호화

터미널에서 다음 명령을 실행하여 인코딩을 준비합니다.

mkdir javascript-image-preview
cd javascript-image-preview
touch index.html main.js

index.html

편집기에서 index.를 열고 다음을 입력합니다.

main.js

편집기에서main.js를 열고 다음 내용을 입력하십시오.
요점은 아래와 같다.

input 요소의change 이벤트 처리 프로그램에서 선택한 파일의 대상 URL을 만들고 요소의 src 속성으로 설정합니다.ESC 때때로 버튼 등을 통해 파일 선택을 취소할 수 있기 때문에if문구를 사용하여 선택한 파일의 건수를 검사하고 있습니다.

동작 확인

브라우저에서 index.), 맥OS의 경우 터미널에서 다음 명령을 실행하는 것이 편리합니다.

open index.html

이미지 파일 선택부를 클릭하고 적합한 이미지 파일을 선택하여 미리보기가 표시되는지 확인합니다.

끝말

웹 서버에서 Content Security Policy를 설정하면 미리보기가 표시되지 않을 수 있습니다.특히 크롬이 개발한 공식 환경에서 사파리와 아이폰에 접속하면 이동이 불가능할 수 있으니 @src,connect-src,media-src 등에 추가blob:를 시도해 보세요.또한 이 글에는 사용되지 않았지만 애니메이션에 대해서도 같은 절차에 따라 미리보기를 표시할 수 있다.그림과 애니메이션의 미리보기를 보여주고 싶다는 요구가 적지 않기 때문에 이 기사가 실장 방법을 찾는 사람들에게 도움이 된다면 좋겠다.끝까지 읽어주셔서 감사합니다!