BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] アップロード前にファイルサイズ、画像の幅と高さを取得する

2022-12-19 19:50:05

質問

ウェブサイトにアップロードする前に、ファイルサイズ、画像の高さ、幅をjQueryやJavaScriptで取得するにはどうしたらよいでしょうか？

どのように解決するのですか？

情報データプレビューで複数の画像をアップロードする

使用方法 HTML5 と ファイル API

使用例 URL API

画像ソースは の URL であり、Blob オブジェクトを表す

<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>

例 FileReader API

Base64でエンコードされた長いデータ文字列としての画像ソースが必要な場合

<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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します