Comment puis-je prévisualiser la taille du fichier et les dimensions de l'image avant de le télécharger avec HTML5 et JavaScript ?

Aperçu des métadonnées du fichier avant de le télécharger avec HTML5 et JavaScript

Problème :

Comment pouvez-vous obtenir la taille du fichier, l'image largeur et hauteur avant de télécharger un fichier sur votre site Web à l'aide de jQuery ou JavaScript ?

Solution :

Grâce à l'API de fichier HTML5, vous pouvez accéder aux informations suivantes avant le téléchargement du fichier :

Taille du fichier :

• Grâce à la propriété file.size, qui renvoie la taille du fichier en octets.

Largeur et hauteur de l'image :

• Pour les images, vous pouvez utiliser l'API d'URL pour créer une URL temporaire pour le blob d'image et chargez-la dans un élément d'image temporaire.
• Une fois l'image chargée, vous pouvez accéder à ses propriétés de largeur et de hauteur avant de révoquer l'URL de l'objet pour libérer mémoire.

Exemple d'utilisation de l'API URL :

L'extrait de code ci-dessous montre comment prévisualiser les métadonnées d'une image à l'aide de l'API URL :

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);
});

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!