Web アプリケーションにアップロードする前にファイルのプレビューを表示するにはどうすればよいですか?

アップロード前のファイル プレビューの表示

ファイルをアップロードする際のユーザー エクスペリエンスを向上させるために、画像のプレビューを提供することが望ましいことがよくあります。アップロードプロセスが開始される前に。ネイティブ ブラウザ機能を活用すると、非同期ファイル アップロードに頼ることなく、これを簡単に実現できます。

アップロードする前に画像をプレビューするには、次の手順に従います。

1. 入力要素: を作成します。 accept 属性が「image/*」に設定された要素。これにより、ユーザーは画像ファイルを選択できるようになります。
2. キャプチャ ファイルの選択: でイベント リスナーを使用します。ファイル選択をキャプチャする要素。ファイルが選択されると、イベント ハンドラーがトリガーされます。
3. オブジェクト URL の生成: イベント ハンドラー内で、imgInp.files[0] を使用して選択したファイルにアクセスします。画像を表示するには、URL.createObjectURL(file) を使用して一時 URL を生成します。
4. 表示画像: 生成された URL を の src 属性に割り当てます。ページ上の要素。これにより、画像がプレビューとしてレンダリングされます。

これを実現する方法を示すコード スニペットの例を次に示します。

const imgInp = document.getElementById("imgInp");

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

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

このメソッドを実装すると、ユーザーは、アップロード プロセスを開始する前に選択した画像を視覚化できるため、Web アプリケーションの使いやすさが向上します。

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