readAsDataURL と createObjectURL について

readAsDataURL の同期的な使用例

function readFileSync(file) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    const result = e.target.result;
    console.log(result);
  };
}

const file = document.querySelector('input[type="file"]').files[0];
readFileSync(file);

readAsDataURL の非同期的な使用例 (async await を使用)

async function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function (e) {
      const result = e.target.result;
      resolve(result);
    };
    reader.onerror = function (e) {
      reject(e);
    };
    reader.readAsDataURL(file);
  });
}

async function main() {
  try {
    const file = document.querySelector('input[type="file"]').files[0];
    const result = await readFileAsync(file);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

createObjectURL の同期的な使用例

function createObjectURLSync(file) {
  const url = URL.createObjectURL(file);
  console.log(url);
}

const file = document.querySelector('input[type="file"]').files[0];
createObjectURLSync(file);

createObjectURL の非同期的な使用例 (async await を使用)

async function createObjectURLAsync(file) {
  return new Promise((resolve, reject) => {
    try {
      const url = URL.createObjectURL(file);
      resolve(url);
    } catch (error) {
      reject(error);
    }
  });
}

async function main() {
  try {
    const file = document.querySelector('input[type="file"]').files[0];
    const url = await createObjectURLAsync(file);
    console.log(url);
  } catch (error) {
    console.error(error);
  }
}

main();

1. HTMLに画像を表示するための要素を作成します。例えば、<div>要素を使用します。

<div id="preview"></div>

2. JavaScriptで、各ファイルに対して FileReader を使用してプレビューを作成します。

function createImagePreview(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function (e) {
      const img = document.createElement('img');
      img.src = e.target.result;
      img.style.width = '100px'; // プレビューの解像度を調整するために適宜変更してください
      img.style.height = 'auto';
      document.getElementById('preview').appendChild(img);
      resolve();
    };
    reader.onerror = function (e) {
      reject(e);
    };
    reader.readAsDataURL(file);
  });
}

const files = document.querySelector('input[type="file"]').files;
const previewPromises = Array.from(files).map(file => createImagePreview(file));

Promise.all(previewPromises)
  .then(() => {
    console.log('プレビュー作成完了');
  })
  .catch(error => {
    console.error('プレビュー作成エラー:', error);
  });