Comment obtenir la taille du fichier et les dimensions de l'image avant de le télécharger avec JavaScript ?

Taille du fichier et dimensions de l'image avant le téléchargement à l'aide de jQuery ou JavaScript

Pour obtenir la taille du fichier, la largeur et la hauteur de l'image avant le téléchargement sur un site Web, utilisez l'API de fichier fourni par HTML5 et JavaScript.

Utilisation de l'API URL

Les objets Blob seront représentés sous forme d'URL pour l'image sources.

<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">

const EL_browse = document.getElementById('browse');
const EL_preview = document.getElementById('preview');

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

#preview img { max-height: 100px; }

<input>

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!