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

アップロード前の画像プレビューの表示

アップロード前に画像をプレビューすると、ユーザーが共有するコンテンツを一目で確認できるため、ユーザー エクスペリエンスが向上します。このプレビューをブラウザ内で完全に実行することで、Ajax リクエストの必要性がなくなり、シームレスで効率的なプロセスが保証されます。

画像プレビュー機能の実装

画像プレビュー機能を実現するには、 FileReader API と URL.createObjectURL() メソッドの機能を利用します。このアプローチでは、以下に示すように、選択した画像ファイルを URL としてロードし、画像要素内に表示できます。

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

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

このコードは、入力フィールド (imgInp) から画像ファイルをキャプチャします。そして、URL.createObjectURL(file) を使用して画像のコンテンツを表す URL を構築します。その後、画像要素 (まあ) にこの URL が割り当てられ、選択した画像がプレビューとして表示されます。

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