[解決済み] アップロード前に画像をプレビューする

2022-03-19 16:48:46

質問

ファイル（画像）をアップロードする前にプレビューできるようにしたい。画像をアップロードするためにAjaxを使用せずに、プレビューアクションはすべてブラウザ内で実行される必要があります。

どうすればよいのでしょうか？

imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}

<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>