アップロードする前にクライアント側で画像をプレビューするにはどうすればよいですか?

クライアント側で画像をプレビューする

アップロードする前に画像をプレビューするには、HTML のファイル入力と URL.createObjectURL を利用できます。 （） 方法。完全にブラウザ内で動作する詳細なソリューションは次のとおりです。

HTML フォームに、画像を選択できる入力フィールドを追加します。

<form runat="server">
  <input accept="image/*" type='file'>

次に、画像要素を作成して、プレビュー:

<img>

最後に、入力フィールドで選択したファイルをキャプチャし、そのコンテンツを使用してオブジェクト URL を作成し、その後割り当てられる JavaScript を追加します。画像要素の src 属性に追加します:

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

ユーザーが入力フィールドで画像を選択すると、このコードは動的に画像要素を更新し、選択した画像のプレビューを表示します。画像をアップロードする必要はありません。サーバ。このアプローチは、ユーザーがアップロードを開始する前に、クライアント側で画像ファイルのインスタント プレビューを表示する場合に便利で効率的です。

以上がアップロードする前にクライアント側で画像をプレビューするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。