업로드하기 전에 클라이언트 측에서 이미지를 미리 보려면 어떻게 해야 합니까?

클라이언트 측에서 이미지 미리보기

이미지를 업로드하기 전에 미리 보려면 HTML의 파일 입력 및 URL.createObjectURL을 활용할 수 있습니다. () 방법. 다음은 브라우저 내에서 완전히 작동하는 자세한 솔루션입니다.

HTML 양식에서 이미지를 선택할 수 있는 입력 필드를 추가합니다.

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

다음으로, 이미지 요소를 생성하여 미리보기:

<img>

마지막으로 입력 필드에서 선택한 파일을 캡처하고 해당 콘텐츠를 사용하여 개체 URL을 생성하는 JavaScript를 추가합니다. 이미지 요소의 src 속성:

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

사용자가 입력 필드에서 이미지를 선택하면 이 코드는 이미지 요소를 동적으로 업데이트하여 서버에 업로드하지 않고도 선택한 이미지의 미리보기를 표시합니다. . 이 접근 방식은 사용자가 이미지 파일을 업로드하기 전에 클라이언트 측에서 이미지 파일의 즉각적인 미리 보기를 제공하는 데 편리하고 효율적입니다.

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