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

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

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1736閲覧

input type="file" をモーダル画面のように表示

pondering

総合スコア104

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/08/07 09:13

#<input type="file">をクリックした際に出てくるアップロードの画面の制御は可能でしょうか。
<input type="file">で、ファイルのアップロードの際に
①背景に薄い黒色を乗せる(モーダル画面のようにしたい。)
②画面の指定した箇所(天地中央)にしたい。

##【やりたいことのイメージ】
イメージ説明

HTML

1 <body> 2 <header> 3 </header> 4 <main class="main main-over"> 5 <div class="buttonArea"> 6 <form method="post"> 7 <input type="file" name="userfile"> 8 <input type="button" value="通常アップロード"> 9 </form> 10 </div> 11 </main> 12 </body>
$(function() { $('input[type=button]').click(function() { $('input[type=file]').trigger('click'); $(".main-over").css( { 'background' : 'rgba(0,0,0,0.5)' }); }); });

jQueryで、アップロード画面が出た際に背景色をつけることはできましたが
解除の際の指定方法も分からずです。
(アップロード画面の「開く」、「キャンセル」ボタンを押したら解除したいです。)

このような、アップロード画面の制御が可能なのでしたら、取り入れる際の方法を教えていただきたく存じます。

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

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

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

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

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

guest

回答2

0

ダイアログを制御するのは汎用性を損なうので無理だと思ったほうがよいでしょう
ドラッグアンドドロップ用のモーダルを開いて、そこにファイルを落としてもらうとかの方が
現実的だと思います

投稿2020/08/07 10:04

yambejp

総合スコア114843

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

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

pondering

2020/08/07 12:31

ドラッグアンドドロップ用のモーダルを開いて、そこにファイルを落として[…] このような方法を考えらておりませんでした。頭を柔らかく、色々と試してみたいと思います。 回答いただき、ありがとうございました!
guest

0

ベストアンサー

①背景に薄い黒色を乗せる(モーダル画面のようにしたい。)

こちらは背景を出すことはできますが、正しく解除することができない場合が考えられます(ファイルを選択したときはonChangeで検知できるのですが、キャンセルした場合に発生するイベントがないのです)。

②画面の指定した箇所(天地中央)にしたい。

こちらも制御する手段は用意されていません(OSによっては、ダイアログ形態を取らない場合もあります)。

投稿2020/08/07 09:26

maisumakun

総合スコア145184

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

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

pondering

2020/08/07 12:25

①、②どちらも大変分かりやすい詳細のご回答をいただきありがとうございました。疑問に思っていた内容が解消できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問