웹 애플리케이션에 업로드하기 전에 파일 미리 보기를 어떻게 표시할 수 있습니까?

업로드 전 파일 미리보기 표시

파일 업로드 시 사용자 경험을 향상하려면 이미지 미리보기를 제공하는 것이 바람직한 경우가 많습니다. 업로드 프로세스가 시작되기 전에. 기본 브라우저 기능을 활용하면 비동기식 파일 업로드에 의존하지 않고도 이를 쉽게 달성할 수 있습니다.

이미지를 업로드하기 전에 미리 보려면 다음 단계를 따르세요.

1. 이미지 만들기 입력 요소: accept 속성이 "image/*"로 설정된 요소입니다. 이를 통해 사용자는 이미지 파일을 선택할 수 있습니다.
2. 캡처 파일 선택: 파일 선택을 캡처하는 요소입니다. 파일을 선택하면 이벤트 핸들러가 실행됩니다.
3. 객체 URL 생성: 이벤트 핸들러 내에서 imgInp.files[0]을 사용하여 선택한 파일에 액세스합니다. 이미지를 표시하려면 URL.createObjectURL(file)을 사용하여 임시 URL을 생성하세요.
4. 이미지 표시: 생성된 URL을 페이지의 요소입니다. 이렇게 하면 이미지가 미리보기로 렌더링됩니다.

다음은 이를 달성하는 방법을 보여주는 예제 코드 조각입니다.

const imgInp = document.getElementById("imgInp");

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

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

이 방법을 구현하면 사용자는 업로드 프로세스를 시작하기 전에 선택한 이미지를 시각화할 수 있어 웹 애플리케이션의 사용자 친화성이 향상됩니다.

위 내용은 웹 애플리케이션에 업로드하기 전에 파일 미리 보기를 어떻게 표시할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!