【jQuery】複数のinput [type="file"]に対して実行する処理について

実現したいこと

33個のinput [type="file"] に対して以下の処理を実行したいです。
33個分のnameを配列で登録をし、処理をその登録した配列に対してできるとコードが短縮されるのかなと思ったのですが、やり方がわからずご教示いただけますと幸いです。

js
1$('input[type="file"]').on('change', 
2function () {
3  var file = $(this).prop('files')[0];
4  $('p[id*="photo-name"]').text(file.name);
5});

HTMLは以下の項目を33個分記載しています。

html
1<div class="file-section">
2                    <label>
3                        <input type="file" name="file33" class="wpcf7-form-control wpcf7-file wpcf7-validates-as-required wpcf7-not-valid" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv">
4                            <span class="icon"><i class="fa fa-camera" aria-hidden="true"></i></span>
5                            <p id="photo-name33">選択されていません</p>
6                        </span>
7                    </label>
8                </div>

該当のソースコード

jQuery html

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1$(function(){
2  $('input[type="file"]').on('change',function () {
3    var file = $(this).prop('files')[0];
4    $(this).nextAll('p[id*="photo-name"]').text(file.name);
5  });
6});