Comment puis-je obtenir la taille du fichier, la largeur et la hauteur de l'image avant de télécharger un fichier à l'aide de HTML5 et JavaScript ?

Obtenir la taille du fichier, la largeur et la hauteur de l'image avant le téléchargement

Obtenir la taille du fichier et les dimensions de l'image avant le téléchargement est essentiel pour valider et gérer les soumissions. Voici comment y parvenir en utilisant HTML5 et JavaScript :

Utilisation de l'API de fichiers HTML5

L'API de fichiers fournit un mécanisme permettant d'accéder aux informations sur les fichiers sélectionnés par l'utilisateur. Cela peut être exploité pour récupérer la taille du fichier, la hauteur et la largeur de l’image. Prenons l'exemple suivant :

const browseInput = document.getElementById('browse');
const previewContainer = document.getElementById('preview');

const handleFileSelection = (event) => {
  previewContainer.innerHTML = '';
  const files = event.target.files;

  if (!files || files.length === 0) {
    alert('No files selected!');
    return;
  }

  for (const file of files) {
    // Check if the file is an image
    if (!file.type.startsWith('image/')) {
      previewContainer.insertAdjacentHTML('beforeend', `Unsupported format: ${file.name}<br>`);
      continue;
    }

    // Create an image element to calculate width and height
    const img = new Image();
    img.onload = () => {
      previewContainer.appendChild(img);
      const fileInfo = `
        <div>
          ${file.name}
          ${img.width} × ${img.height}
          ${file.type}
          ${Math.round(file.size / 1024)} KB
        </div>
      `;
      previewContainer.insertAdjacentHTML('beforeend', fileInfo);
    };

    // Load the image and release the URL when done
    img.src = URL.createObjectURL(file);
  }
};

browseInput.addEventListener('change', handleFileSelection);

Autres possibilités

Cette approche vous permet d'obtenir la taille du fichier, la largeur et la hauteur de l'image avant le téléchargement, permettant un meilleur contrôle sur les types et les dimensions de fichiers acceptés. De plus, vous pouvez utiliser ces informations à des fins de validation et d'affichage, par exemple pour fournir un aperçu des images sélectionnées avant la soumission.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!