HTML5 및 JavaScript로 업로드하기 전에 파일 크기, 이미지 크기를 어떻게 미리 볼 수 있습니까?

HTML5 및 JavaScript로 업로드하기 전에 파일 메타데이터 미리보기

문제:

파일 크기, 이미지를 어떻게 얻을 수 있나요? jQuery를 사용하여 웹 사이트에 파일을 업로드하기 전에 너비, 높이 또는 JavaScript?

해결책:

HTML5의 파일 API를 활용하면 파일 업로드 전에 다음 정보에 액세스할 수 있습니다.

파일 크기:

• file.size 속성을 통해 다음을 반환합니다. 파일 크기(바이트).

이미지 너비 및 높이:

• 이미지의 경우 URL API를 사용하여 임시 URL을 생성할 수 있습니다. 이미지 blob을 생성하여 임시 이미지 요소에 로드합니다.
• 이미지가 로드되면 이전에 너비 및 높이 속성에 액세스할 수 있습니다. 객체 URL을 취소하여 메모리를 확보합니다.

URL API 사용 예:

아래 코드 조각은 URL API를 사용하여 이미지 메타데이터를 미리 보는 방법을 보여줍니다.

const readImage = file => {
  if (!(/^image\/(png|jpe?g|gif)$/).test(file.type))
    return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`);

  const img = new Image();
  img.addEventListener('load', () => {
    EL_preview.appendChild(img);
    EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size / 1024)}KB<div>`);
    window.URL.revokeObjectURL(img.src); // Free some memory
  });
  img.src = window.URL.createObjectURL(file);
};

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Remove old images and data
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach(readImage);
});

위 내용은 HTML5 및 JavaScript로 업로드하기 전에 파일 크기, 이미지 크기를 어떻게 미리 볼 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!