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: ""; }
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。