jQueryを使って選択ボタン一つに対して複数データを選択し、選択したデータ名を別で表示したい

Question

HTML、CSS、jQueryを使って画像選択ボタンを作成しています。

選択ボタンと選択したデータ名が表示される場所を装飾したかった為現状以下の様にしています。

<form action="#" method="post" enctype="multipart/form-datta">
                         　<div id="btn">画像を選択</div>
                                <input type="file" name="filename" id="files">
                                <input type="text" id="filename" placeholder="選択されていません" readonly>
                       </form>

form{
    width: 90%;
    margin: auto;
}
.files{
    background: none;
    box-shadow: none;
    border: none;
}

#btn{
    background-color: #838383;
    color: white;
    content: "画像を選択";
    cursor: pointer;
    width: 150px;
    height: 30px;
    display: inline-block;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
}

#filename{
    display: inline-block;
    width: 60%;
    height: 30px;
    background-color: #EFF7FF;
    border-radius: 6px;
    border-color: #707070;
    border-width: thin;
    padding: 5px;
    pointer-events: none;
}

$(function() {
     $('#files').css({
         'position': 'absolute',
         'top': '-9999px'
     }).change(function() {
         var val = $(this).val();
         var path = val.replace(/\/g, '/');
         var match = path.lastIndexOf('/');
    $('#filename').css("display","inline-block");
         $('#filename').val(match !== -1 ? val.substring(match + 1) : val);
     });
     $('#filename').bind('keyup, keydown, keypress', function() {
         return false;
     });
     $('#btn').click(function() {
         $('#files').trigger('click');
     });
 });

このままだと画像選択ボタン１つに対し、１つしか選択ができなかった為、HTMLにmultipleを追加して以下の様にしました。

<form action="#" method="post" enctype="multipart/form-datta">
                             <table>
                                  <tr>
                                       <td> <div id="btn">画像を選択</div>
                                            <input type="file" name="filename" id="files" multiple></td>
                                       <td class="image_box"><input type="text" id="filename" placeholder="選択されていません" readonly></td>
                                  </tr>
                                  <tr>
                                       <td></td>
                                       <td class="image_box"><input type="text" id="filename2" placeholder="選択されていません" readonly></td>
                                  </tr>
                             </table>
                       </form>

form{
    width: 90%;
    margin: auto;
}
.files{
    background: none;
    box-shadow: none;
    border: none;
}

#btn{
    background-color: #838383;
    color: white;
    content: "画像を選択";
    cursor: pointer;
    width: 150px;
    height: 30px;
    display: inline-block;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
}

#filename,
#filename2{
    display: inline-block;
    width: 60%;
    height: 30px;
    background-color: #EFF7FF;
    border-radius: 6px;
    border-color: #707070;
    border-width: thin;
    padding: 5px;
    pointer-events: none;
}

.image_box{
    width: 100%;
    padding: 0 0 10px 10px;
}

td{
    padding-bottom: 10px;
}

$(function() {
     $('#files').css({
         'position': 'absolute',
         'top': '-9999px'
     }).change(function() {
         var val = $(this).val();
         var path = val.replace(/\/g, '/');
         var match = path.lastIndexOf('/');
    $('#filename').css("display","inline-block");
         $('#filename').val(match !== -1 ? val.substring(match + 1) : val);
    $('#filename2').css("display","inline-block");
         $('#filename2').val(match !== -1 ? val.substring(match + 3) : val);
     });
     $('#filename','#filename2').bind('keyup, keydown, keypress', function() {
         return false;
     });
     $('#btn').click(function() {
         $('#files').trigger('click');
     });
 });

選択ボタン１つに対し、画像は２つ選択できるのですがデータ名がfilenameとfilename２に同じものしか表示されません。（filename２は文字が一部切れて表示されます。）
どうすればデータ名が選択した分バラバラに表示されるのでしょうか？

また、記載のjQueryはネットで調べて出てきたものをコピペしている状態で、はっきりと意味はわかっていません。
調べてはみたのですがイマイチわかりませんでした。
なんとなくここじゃないかというところに追加しているので、「match !== 1 ? val.substring(match + 30) : val」が何を表しているのか良ければ教えていただけると助かります。

Answer 1

■filenameとfilename２が上手く表示されない件について

inputの値を$(this).val();で値を取得しようとしていますが
$(this).prop('files');を使って取得した方が良いかもしれません。

取得した値は配列でかえってきますので、あとはちゃんと存在するかチェックして表示してあげれば行けると思います

        var $files = $(this).prop('files');
        $('#filename').css("display", "inline-block");
        $('#filename').val( (typeof( $files[0] ) != 'undefined' )? $files[0].name : ""  );

        $('#filename2').css("display", "inline-block");
        $('#filename2').val( (typeof( $files[1] ) != 'undefined' )? $files[1].name : ""  );

■「match !== 1 ? val.substring(match + 30) : val」について

まずこれは条件 ? 値1 : 値2 の形式で書かれてます。
条件が真なら値1を、偽なら値2が採用されます。

参考：条件 (三項) 演算子

次にval.substring(match + 30)は文字の切り出しを行ってます。

上記の式ならvalの文字をmatch + 30の値の分だけ取ってから出力してます。

参考：String.prototype.substring()

コード自体の意図についてはちょっとわからないですが、今回の件ではおそらく不要だと思います。

Comments

[退会済みユーザー]

希望通りの動きになりました！
御丁寧に解説と参考URLも教えて頂きありがとうございます。
凄く助かりました！