>웹 프론트엔드 >JS 튜토리얼 >업로드하기 전에 파일 크기와 이미지 크기를 얻는 방법은 무엇입니까?

업로드하기 전에 파일 크기와 이미지 크기를 얻는 방법은 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-12-06 05:38:10817검색

How to Get File Size and Image Dimensions Before Uploading?

업로드 전 파일 크기, 이미지 크기를 얻는 방법

웹 개발 영역에서는 파일에 대한 주요 세부 정보를 검색해야 하는 경우가 많습니다. 웹사이트에 업로드하기 전에. 파일 크기, 이미지 너비, 높이 등의 정보는 파일 형식 검증, 업로드 효율성 최적화, 사용자에게 관련 피드백 제공에 도움이 될 수 있습니다.

jQuery 또는 JavaScript와 함께 File API 사용:

HTML5의 File API는 파일 관련 정보에 액세스하기 위한 포괄적인 기능 모음을 제공합니다. 이 API를 jQuery 또는 JavaScript와 함께 활용하면 업로드 프로세스를 시작하기 전에 이러한 세부 정보를 원활하게 캡처할 수 있습니다.

다음 예에서는 File API와 jQuery를 모두 사용하여 원하는 정보를 가져오고 표시하는 방법을 보여줍니다.

$('#browse-input').change(function() {
  let files = this.files;
  
  // Iterate through each selected file
  for (let i = 0; i < files.length; i++) {
    let file = files[i];
    
    // Extract desired information from each file
    let size = file.size;
    let width, height;
    
    // Check if file is an image and extract image dimensions if so
    if (file.type.match('image/*')) {
      let img = new Image();
      
      img.onload = function() {
        width = img.width;
        height = img.height;
        // Display extracted information
        console.log(`File: ${file.name}, Size: ${size} bytes, Width: ${width}px, Height: ${height}px`);
      };
      
      img.src = URL.createObjectURL(file);
    } else {
      // Display information for non-image files
      console.log(`File: ${file.name}, Size: ${size} bytes`);
    }
  }
});

이 솔루션을 통합하면 사용자가 업로드하려는 파일에 대한 포괄적인 보기를 제공하여 정보에 입각한 결정을 내리고 업로드를 간소화할 수 있습니다. 프로세스입니다.

위 내용은 업로드하기 전에 파일 크기와 이미지 크기를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.