JavaScriptでアップロードする前に画像をプレビューする

セキュリティ上の理由から、ブラウザは入力を介して選択された画像ファイルのパスにアクセスすることを許可していません。つまり、ブラウザのJavaScriptはファイルシステムにアクセスできません。したがって、私たちのタスクは、入力を介して選択された画像ファイルをプレビューしてから、サーバーやその他の場所に送信することです。

方法1：URLクラスを使用する：

URLクラスのcreateObjectURL（）関数を使用して、入力によって選択された画像のURLを作成し、そのURLをimgタグのsrc属性に提供できます。

例

このためのコードは-

<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
   const previewImage = e => {
      const preview = document.getElementById('preview');
      preview.src = URL.createObjectURL(e.target.files[0]);
      preview.onload = () => URL.revokeObjectURL(preview.src);
   };
</script>

方法2：FileReaderクラスの使用：

このメソッドは、によって取り込まれたファイルを解析してから、画像のbase64表現を含む文字列を作成します。

例

このためのコードは-

<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
   const previewImage = e => {
      const reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]);
      reader.onload = () => {
         const preview = document.getElementById('preview');
         preview.src = reader.result;
      };
   };
</script>

出力

両方のメソッドの出力は次のようになります-