Comment puis-je obtenir la taille du fichier, les dimensions de l'image et le type avant de le télécharger en HTML5 ?

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

Avec l'avènement du HTML5 et de l'API File, l'obtention de la taille du fichier, la largeur et la hauteur de l'image avant le téléchargement sont devenues beaucoup plus simples.

Utiliser l'URL API

Cette méthode utilise l'API URL pour créer une représentation URL du fichier téléchargé :

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

Cela permet d'afficher l'image sous forme d'aperçu et d'afficher des détails tels que le nom du fichier, dimensions, type de fichier et taille avant le téléchargement.

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!