Maison > interface Web > js tutoriel > Comment obtenir la taille du fichier et les dimensions de l'image avant de le télécharger avec JavaScript ?

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

Mary-Kate Olsen
Libérer: 2024-11-25 12:39:10
original
893 Les gens l'ont consulté

How to Get File Size and Image Dimensions Before Upload with 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">
Copier après la connexion
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);
});
Copier après la connexion
#preview img { max-height: 100px; }
Copier après la connexion
<input>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal