input[type=”file”]にて選択したファイル名を表示したい。一つのページに複数あり。

Question

input[type=”file”]の装飾をしています。

input要素は非表示にして、
代わりに、label要素に画像をあてて、
画像をボタンとして見立てています。

その上で、選択したファイル名を表示させる為に、
Javascriptで対応しようと思いました。

条件は、1つのページ内に
複数のinput[type=”file”]があります。

実現したいことは、
input[type=”file”]がクリックされたときに、
隣接している<div>要素にファイル名を表示したいです。
※トリガーとなる要素や、div要素にはとくにこだわりはありません。

どうぞよろしくお願い致します。

余談ですが、
1つのページ内に、1つのinput[type=”file”]は別コードで実現できました。

<div>

<div>
<label class='camera' for='camera0'>
<input type="file" id='camera0' name='File'>
</label>
<div>ファイルが未選択です</div>
</div>

<div>
<label class='camera' for='camera1'>
<input type="file" id='camera1' name='File'>
</label>
<div>ファイルが未選択です</div>
</div>

</div>

$('input[type=file]').change(function() {
var This = $(this);
var file = $(this).prop('files')[0];
$(this).find('div').text(file.name);
});

.camera {
background-image: url("../img/camera.svg");
width: 36px;
height: 36px;
display: block;
}
.camera input {
display: none;
}

Comments

[itagagaki]

.camera input { display: none; } のせいでボタンが無く、ファイルを選ぶことができないですが、これはどういう意図ですか？
これを消してボタンを押してファイルを選んだらファイル名が表示されましたが、それは意図したこととは違うのですか？

[退会済みユーザー]

input要素は非表示にして、
代わりに、label要素に画像をあてて、
画像をボタンとして見立てている意図になります。

ありがとうございます。追記いたしました。

Answer 1

$(this).parent().parent().find('div').text(file.name);とするとどうですか。

Comments

[退会済みユーザー]

修正後、ファイルを選択しても、「ファイルが未選択です」で変わりませんでした。
ありがとうございます。

[Lhankor_Mhy]

当方では問題なく動作しました。

[退会済みユーザー]

ありがとうございます。これからやってみます。

[itagagaki]

<div class="filename">ファイルが未選択です</div>
$(this).parent().parent().find('div.filename').text(file.name);
こういうことですね。

[退会済みユーザー]

ありがとうございます。
code penで検証したらできました。
お騒がせいたしました。
itagakiさんもありがとうございました。理解がすすみました。

[退会済みユーザー]

できました！改めてありがとうございました。

余談ですが、最初にうまくできなかった理由は、
JSの読み込みの順番でした。

一部、PHPでHTMLを生成しています。

[Lhankor_Mhy]

お役に立てたようで何よりです。

itagagakiさん、補足ありがとうございました。