特定のフォームで問題が発生しています。
フォームが送信され、フォームにエラーがある場合 (必須フィールドに入力するのを忘れた可能性があります)、フォームは想定どおりにエラーでリロードされます。ただし、以前に選択した画像は消えてしまい、再度選択する必要があります。
エラーのあるフォームを送信する前に:
エラーのあるフォームを送信した後:
これは、使用されている HTML タグです。
<input type="file" accept="image/*" id="Image" name="Image"/>
私が必要とするのは、画像セレクターが送信間で選択された画像を維持することです。これを行う良い方法はありますか？おそらくセッションへのファイルパスを保存し、それを要素に再度入力する方法はありますか?
ブラウザーは、セキュリティ対策として、ファイル アップロード フィールドの自動復元を許可しません。検証でファイルが失われないようにするには、クライアント側ですべての検証を実行し (ただし、常にサーバーで再度検証する必要があります)、すべてが正しくなるまでフォームが送信されないようにするか、送信されたファイルを取得する必要があります。初めて、すべての検証が完了してフォームが最終的に到達するまで、それらを保持します。
この 2 番目のケースでは、いくつかのオプションがあります。
コンテンツをどこかに保存し、フォームを返すときに非表示フィールドに保持される一意の ID ポインターを返します。また、アップロード済みのファイルを示すラベルを表示することも検討する必要があります。あきらめて後で戻ってきたユーザーからアップロードを定期的にクリーンアップする必要があります (したがって、アップロードを照合するためにその相関 ID を使用してフォームを送信することはありません)。
Base64 は、アップロードされたファイルのコンテンツをエンコードし、それをビューの非表示フィールドに返します。これはより多くの帯域幅を消費しますが、適切な形式に関連付けられていないファイルをサーバーに保存する必要はありません。Base64 でエンコードされたイメージをイメージ タグ (または CSS 属性) のソースとして指定できるため、返されたビューに同じイメージを表示することもできます。これはブラウザ固有の可能性があります。
ファイルのアップロードのサイズが制限されている限り (たとえば 100kb)、オプション 2 が私の好みのアプローチです。これは、ページに含まれるすべての最新の JavaScript ライブラリよりもはるかに大きくなく、セッション、クリーンアップ、または過剰な処理をサーバーに任せながら、ユーザー エクスペリエンスを向上させます。
編集: 画像のアップロードを許可する多くのサイトでは、ファイル サイズの検証も提供され、サイズが大きすぎる場合はキックバックされます。この場合、ユーザーはアセットが保存されていないというフィードバックを受け取り、エンコードして返す必要はありません。
編集2：
これは、ファイル アップロード コントロールの値フィールドを読み取り専用としてマークし、これを JavaScript によって変更できないようにするブラウザーに関する投稿です (直接のユーザー アクションによってのみ変更できます)。
そして、HTMLでBase64でエンコードされた画像を直接使用することに関するSOコメントがあります。質問者はデータを別のファイルに入れる方法を探していますが、これはあなたが望むものではありません。「これが機能する」部分は、上記のオプション 2 で言及したものです。
非表示フィールドを使用して、ラベルで選択したファイルを表示できると思います。検証後、ファイルの内容を取得し、それをセッションまたは一時的な場所に保存します。次に、ラベルにページを表示しながら、ユーザーが以前に選択したファイルパスを表示し、隠しフィールドで同じものを更新します。ユーザーがフォームを再度送信する場合は、最初にファイルが NULL であるが非表示フィールドの値があるかどうかを確認します。これは、以前にファイルを保存したことを意味します。パスが非表示フィールドと異なる場合は、ファイルの内容を再度取得する必要がある場合があります。
パスを保存するだけでは、最初にアップロードされたファイル ストリームを保存する必要はありません。ユーザーがファイルを再度ロードしないことに満足している場合は、サーバーリソースから何かを支払う必要があると思います:)