HTML5를 사용하여 업로드하기 전에 이미지를 미리 보려면 어떻게 해야 합니까?

업로드 전 이미지 미리보기

웹 개발에서는 사용자가 이미지를 제출하기 전에 미리보기를 제공하는 것이 도움이 될 수 있습니다. . 이를 통해 사용자는 이미지를 업로드하기 전에 이미지가 올바른지 확인할 수 있으므로 잠재적으로 오류 및 재작업 횟수가 줄어듭니다.

해결책: HTML5 파일 인터페이스

다행히도 HTML5는 파일 인터페이스는 서버 요청이나 Ajax를 사용하지 않고도 브라우저에서 이미지를 미리 볼 수 있는 간단한 방법을 제공합니다. 작동 방식은 다음과 같습니다.

1. 이미지 요소 생성

HTML 이미지 미리보기를 표시하기 위한 ID(예: blah)가 있는 요소

2. 입력에서 파일 가져오기

파일 입력 요소에 onchange 이벤트 핸들러를 추가합니다. 파일이 선택되면 이벤트 핸들러는 입력 요소에서 선택한 파일을 추출합니다.

3. 파일 인터페이스 사용

URL.createObjectURL() 메소드를 사용하여 선택한 파일에 대한 객체 URL을 생성합니다. 그러면 브라우저가 이미지를 표시할 수 있는 임시 URL이 생성됩니다.

4. 이미지 소스 업데이트

요소를 개체 URL에 추가합니다. 선택한 이미지의 미리보기가 표시됩니다.

예제 코드

<input accept="image/*" type='file'>

imgInp.onchange = evt => {
  const [file] = imgInp.files;
  if (file) {
    blah.src = URL.createObjectURL(file);
  }
};

위 내용은 HTML5를 사용하여 업로드하기 전에 이미지를 미리 보려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!