Ajax を使用せずにブラウザでアップロードする前に画像をプレビューするにはどうすればよいですか?

ブラウザでアップロードする前に画像をプレビューする

Web 開発の世界では、多くの場合、ユーザーに画像のプレビューを提供することが望ましいです。アップロード プロセスにコミットする前に、アップロードしている画像を確認します。この機能により、視覚的なフィードバックが提供され、共有したい画像について情報に基づいた決定ができ​​るようになるため、ユーザー エクスペリエンスが大幅に向上します。

Ajax を使用しない画像プレビューの実装

Ajax を使用せずに画像プレビューを実現するには、ファイルを操作するためのブラウザベースのインターフェイスを提供する File API を利用する必要があります。次の手順は、このアプローチを使用して画像プレビュー機能を実装する方法の概要を示しています。

1. ファイル入力のイベント ハンドラー:

   • イベントの追加ファイルが入力されたときに関数をトリガーするファイル入力要素のリスナー

2. オブジェクト URL の作成:

   • イベント ハンドラー内で、URL.createObjectURL() メソッドを使用して、選択したものを表す URL を作成しますfile.

3. 画像ソースに URL を割り当てる:

   • を取得します。
   の src 属性を設定します。

コード例:

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

次のコードは、上記の手順の例です:

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

この手法を実装することで、開発者はユーザーにシームレスなサーバー側の操作を必要としない便利な画像プレビュー エクスペリエンス。

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