上传前获取文件大小、图像宽度和高度 [英] Get file size, image width and height before upload

问题描述

如何在上传到我的网站之前使用 jQuery 或 JavaScript 获取文件大小、图像高度和宽度?

解决方案

多张图片上传，带信息数据预览

使用 HTML5 和 的示例

如果您需要像长 Base64 编码数据字符串那样的图像源
<img src="data:image/png;base64,iVBORw0KGg... ...lF/++TkSuQmCC=">

const EL_browse = document.getElementById('browse');const EL_preview = document.getElementById('preview');const readImage = 文件 =>{如果 ( !(/^image/(png|jpe?g|gif)$/).test(file.type) )return EL_preview.insertAdjacentHTML('beforeend', `<div>不支持的格式 ${file.type}: ${file.name}</div>`);const reader = new FileReader();reader.addEventListener('load', () => {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>`);});img.src = reader.result;});reader.readAsDataURL(文件)；};EL_browse.addEventListener('change', ev => {EL_preview.innerHTML = '';//清除预览const 文件 = ev.target.files;if (!files || !files[0]) return alert('不支持文件上传');[...文件].forEach(readImage);});

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

<div id="预览"></div>

How can I get the file size, image height and width before upload to my website, with jQuery or JavaScript?

解决方案

Multiple images upload with info data preview

Using HTML5 and the File API

Example using URL API

The images sources will be a URL representing the Blob object
<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 id="browse" type="file" multiple>
<div id="preview"></div>

Example using FileReader API

In case you need images sources as long Base64 encoded data strings
<img src="data:image/png;base64,iVBORw0KGg... ...lF/++TkSuQmCC=">

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', `<div>Unsupported format ${file.type}: ${file.name}</div>`);

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    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>`);
    });
    img.src = reader.result;
  });
  reader.readAsDataURL(file);  
};

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Clear Preview
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach( readImage );
});

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

<input id="browse" type="file"  multiple>
<div id="preview"></div>
  

这篇关于上传前获取文件大小、图像宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！