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

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

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

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

jQuery

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

HTML

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

Q&A

解決済

2回答

381閲覧

HTML JS inputタグ type="file"について

hurousyotoku500

総合スコア27

JavaScript

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

jQuery

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

HTML

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

0グッド

0クリップ

投稿2020/01/04 02:40

編集2020/01/04 07:15

JS初心者です。
inputタグにてtype="file"で、ファイルのアップロード画面を作成中なのですが、
ファイルを5個までアップロードできる仕様にしたいのですが、
スタイルを変更するために、小細工しています。
下記のコードだとinputタグが5個あるため、5個全てに適用されてしまいます。

2行目の$("input[type='file']")をIDで指定したいのですが、
通常通り$("#IDname[type='file']").on…としたのですが、動きませんでした。
どのように書いたら良いでしょうか。

・JS

$(function(){ $("input[type='file']").on('change',function(){ var file = $(this).prop('files')[0]; if(!($(".filename").length)){ $("#input-group").append('<span class="filename"></span>'); } $("#input-label").addClass('changed'); $(".filename").html(file.name); }); });

・HTML

<section class="file-upload-wrap"> <img src="img/clip.svg" class="clip"> <div id="input-group-1"> <span class="file-label">ファイル1:</span><input type="file" id="01" name="01"><label class="file-button" for="01" id="input-label-1">ファイルを選択</label> </div> <div id="input-group-2"> <span class="file-label">ファイル2:</span><input type="file" id="02" name="02"><label class="file-button" for="02" id="input-label-2">ファイルを選択</label> </div> <div id="input-group-3"> <span class="file-label">ファイル3:</span><input type="file" id="03" name="03"><label class="file-button" for="03" id="input-label-3">ファイルを選択</label> </div> <div id="input-group-4"> <span class="file-label">ファイル4:</span><input type="file" id="04" name="04"><label class="file-button" for="04" id="input-label-4">ファイルを選択</label> </div> <div id="input-group-5"> <span class="file-label">ファイル5:</span><input type="file" id="05" name="05"><label class="file-button" for="05" id="input-label-5">ファイルを選択</label> </div> </section>

・CSS

input[type="file"] { display: none; } .file-button{ padding-left: 1px; border-radius: 10px; display: inline-block; position: relative; border: 1px solid #787878; font-size: 10px; width: 74px; height: 11px; padding-bottom: 2px; } .file-button::after{ content: "選択されていません"; font-size: 10px; height: 20px; line-height: 20px; position: absolute; right: -100px; top: calc(50% - 10px); } .file-button.changed::after { content: ""; }

よろしくお願いします。

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

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

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

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

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

guest

回答2

0

自己解決

ID名をinputタグでないところを見ていました。解決しました。

投稿2020/01/04 07:27

hurousyotoku500

総合スコア27

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

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

0

id振るならページ内に1つしかないのは保証されてるわけですしtypeとかつけなくても良いのでは?

あとはhtmlやcssなども提示されないとこれ以上のアドバイスは無理です。

投稿2020/01/04 05:56

m.ts10806

総合スコア80850

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問