HTML5 を使用してアップロードする前に画像をプレビューするにはどうすればよいですか?

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

Web 開発では、ユーザーが送信する前に画像のプレビューを提供すると有益な場合があります。これにより、ユーザーはアップロードする前に画像が正しいことを確認できるため、エラーややり直しの数が減る可能性があります。

解決策: HTML5 ファイル インターフェイス

幸いなことに、HTML5ファイル インターフェイスは、サーバー リクエストを作成したり、Ajax を使用したりせずに、ブラウザーで画像をプレビューする簡単な方法を提供します。その仕組みは次のとおりです:

1.画像要素を作成する

HTML を作成する 画像プレビューを表示するための ID (例: blah) を持つ要素。

2.入力からファイルを取得します

onchange イベント ハンドラーをファイル入力要素に追加します。ファイルが選択されると、イベント ハンドラーは選択されたファイルを入力要素から抽出します。

3.ファイル インターフェイスの使用

URL.createObjectURL() メソッドを使用して、選択したファイルのオブジェクト URL を作成します。これにより、ブラウザが画像を表示できるようにする一時的な URL が作成されます。

4.画像ソースを更新します

の src 属性を設定します。要素をオブジェクト URL に追加します。選択した画像のプレビューが表示されます。

コード例

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

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

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