質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

3回答

1402閲覧

asp.net core で input type="file" の選択内容を保持する

python_biginer

総合スコア14

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

1クリップ

投稿2023/05/29 13:47

実現したいこと

htmlの input type="file" で特定のファイルを既に選択している状態で画面を開きたいです。
具体的な流れとして
1.input type="file" でファイルを選択する
2.input type="submit" をクリックする
3.Controllerに値を渡した後、再度1.と同じ画面を表示する
4.ファイルを選択した状態の input type="file" を表示する
みたいな動きがしたいです。

前提

visual studio 2022 バージョン17.5.4を使用しており、
・プロジェクトテンプレートはASP.NET core webアプリ(Model-View-Controller)
・ターゲットフレームワークは.NET 7.0
・使用言語はC#、html、javascript
・OSはwindows10
です。

発生している問題・エラーメッセージ

input type="file" でファイルを選択している状態で表示する方法が調べても出てきません。自分が知る限りではvalueで初期値を設定することができない仕様で、またファイルを選択するためには
・ファイル選択ボタンをクリック→好きなファイルをクリック→開く(O)ボタンをクリック
・ドラッグアンドドロップ
の2種類くらいしかありません。
前の画面で選択していたファイルを選択した状態の input type="file" を画面を開いた時点で表示できればなんでも良いので、もしそんな方法があれば教えていただきたいです。

該当のソースコード

試したこと

現在はjavascriptのlocalstorageを使用して遷移後の画面に値を渡すことで初期値を設定する方法を使っているのですが、これでもinput type="file" だけは初期値を設定できませんでした。
inputタグのtype="text"や"date"や"checkbox"などなら初期値を設定できるのは確認済みなのですが、type="file"だけは調べてもセキュリティ上の関係で不可能と書かれているサイトしか見つかりませんでした。
しかし、自分が調べられなかった方法が何かあればと思い質問しました。

補足情報(FW/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2023/05/29 14:04

> 4.ファイルを選択した状態の input type="file" を表示する みたいな動きがしたいです。 「表示する」とはどういうことですか?ページに配置した img 要素に画像を表示したい? 表題の > asp.net core で input type="file" の選択内容を保持する と話が違うようですが、一体何をしたいのか分かりません。説明願います。
hoshi-takanori

2023/05/29 15:34

それを許すとセキュリティホールになるような…。
maisumakun

2023/05/30 02:39

> 3.Controllerに値を渡した後、再度1.と同じ画面を表示する 再表示を行う目的はどのようなものでしょうか?
退会済みユーザー

退会済みユーザー

2023/05/30 23:56

質問者さん、無言ですが、回答が出ているのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは? 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。
guest

回答3

1

ベストアンサー

【追加情報】

一つ案を思いつきました。ajax を使ってアップロードするのが良いと思います。

つまり、

1.input type="file" でファイルを選択する
2.input type="submit" をクリックする
3.Controllerに値を渡した後、再度1.と同じ画面を表示する
4.ファイルを選択した状態の input type="file" を表示する

のステップ 2 のように form を submit してファイルアップロードするのではなく、ajax を使ってファイルをアップロードすれば、アップロード後もブラウザ上の input type="file" はステップ 1 の状態に保たれるので、上の 4 は実現できます。

具体例やサンプルコードは以下の記事を見てください。

ASP.NET Core MVC でファイルアップロード
http://surferonwww.info/BlogEngine/post/2020/01/19/aspnet-core-mvc-file-upload.aspx

下の画像の赤枠で囲った部分を見てください。

イメージ説明

input type="file" でユーザーが form.jpg というファイルを選択した後、[Ajax Upload]ボタンをクリックして、ajax を使って選択されたファイルをアップロードすると、サーバーはそれを受け取って保存した後 "form.jpg (image/jpeg) - 39951 bytes アップロード完了" と言う文字列を応答として返します。ブラウザはその応答を受け取って画面に表示したところが上の画像です。

タイトルの「asp.net core で input type="file" の選択内容を保持する」、ステップ 4 の「ファイルを選択した状態の input type="file" を表示する」は実現されています。

投稿2023/05/30 03:25

編集2023/05/30 03:34
退会済みユーザー

退会済みユーザー

総合スコア0

len_souko👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

1

タイトルの「asp.net core で input type="file" の選択内容を保持する」と言うよりは、ユーザーの操作なしでファイルが選択された状態にしたいということのようですね。

それは質問者さんが、

type="file"だけは調べてもセキュリティ上の関係で不可能と書かれているサイトしか見つかりませんでした。

と書かれたとおりで、できません。

そんなことができたら、悪意のあるサイトが好き勝手にクライアントのファイルを取得できるということになります。なので、ユーザーの操作なしでファイルが選択された状態にはできないようになっています。

質問に書いてある 1, 2 のステップでサーバー側でファイルの情報が取得できた後でも、

4.ファイルを選択した状態の input type="file" を表示する

はできません。

ブラウザが昔の IE ですと、ユーザーがファイルを選択後送信すると、ユーザーの PC 内でのそのファイルのフルパス情報も一緒に送信したのですが、たとえフルパス情報が得られたとしても、JavaScript などでファイルが選択された状態にすることはできません。

前のスレッド、

System.IO の Fileクラスが使用できない
https://teratail.com/questions/5aa93c16whxwi0

の話の続きですか? そこでも書きましたが、ASP.NET Web アプリで Windows Forms アプリと同様なことをしようとか、全く検討違いのことを考えているような気がします。

投稿2023/05/29 23:01

編集2023/05/30 00:53
退会済みユーザー

退会済みユーザー

総合スコア0

len_souko👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

3.Controllerに値を渡した後、再度1.と同じ画面を表示する
4.ファイルを選択した状態の input type="file" を表示する

状況がわからないのでなんとも言えませんが、「どうしても<input type="file">の見た目で表示したい」「4の後にフォームを送信した場合に、ファイルも再送信する必要がある」という2つの条件がいずれもNoなら、「<input type="file">を使わず、何かしらの形で『アップロード済み』の表示をしておく」ような手段も考えられます。

投稿2023/05/30 02:38

maisumakun

総合スコア144988

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。