WordPressのプラグインMW WP Formを使用し、選択した画像のファイル名を指定箇所に表示させたい

WOrdPressのプラグインMW WP Formを使用して、画像を送付できる機能を作成しています。
CSSで見た目を調節した箇所に選択した画像のファイル名を表示させたいですが上手くいきません。

HTML
1<table style="height: 89px;" width="616">
2 <tbodt>
3  <tr>
4   <td class="image_button">
5    ::before
6   <input type="file" name="filename" id="files">
7   <span datamwform-file-delete="filename" class="mwform-file-delete">×</span>
8   </td>
9   <td class="image_box">
10    <input id="filename" type="text" placeholder="選択されていません">
11   </td>
12  </tr>
13 </tbody>
14</table>

CSS
1#files{
2    width: 120px;
3    height: 32px;
4    opacity: 0;
5    position: absolute;
6    top: 3px;
7    cursor: pointer;
8}
9
10.mwform-file-delete
11{
12    display: none;
13}
14
15table{
16    margin-top: 50px;
17}
18
19.image_box{
20    width: 100%;
21    padding: 0 0 48px 30px;
22}
23
24td{
25    padding-bottom: 10px;
26}
27
28.image_button{
29    width: 120px;
30    height: 30px;
31    background-color: rgb(131, 131, 131);
32    border-radius: 50px;
33    display: block;
34    padding: 0;
35    margin: 3px;
36}
37
38.image_button:before{
39    width: 100%;
40    height: 100%;
41    font-size: 15px;
42    display: flex;
43    justify-content: center;
44    align-items: center;
45    content: "画像を選択";
46    color: white;
47}
48
49input#filename{
50    width: 90%;
51    height: 30px;
52    background-color: #EFF7FF;
53    border-radius: 6px;
54    border-color: #707070;
55    border-width: thin;
56    padding: 5px;
57    pointer-events: none;
58}

Javascript
1$(function() {
2$("#files").on("click", function(){
3    document.getElementById('files').Value =
4    document.getElementById("filename").Value;
5});
6});

MW
1<table style="height: 89px;" width="616">
2<tbody>
3<tr>
4<td class="image_button">
5[mwform_image type="file" name="filename" id="files"]</td>
6<td class="image_box"><input id="filename" type="text" placeholder="選択されていません" /></td>
7</tr>
8</tbody>
9</table>

Javascriptでfilesをクリックした時filesの値をとって、filenameへ入れればいいのかと思ったのですが書き方がおかしいのでしょうか？

どなたかお分かりになる方、ご指摘頂けますと幸いです。

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

回答1件

ベストアンサー

Javascript
1$(function() {
2    $('#files').css({
3    }).change(function() {
4        var val = $(this).val();
5        var path = val.replace(/\/g, '/');
6        var match = path.lastIndexOf('/');
7   $('#filename').css("display","inline-block");
8        $('#filename').val(match !== -1 ? val.substring(match + 1) : val);
9    });
10    $('#filename').bind('keyup, keydown, keypress', function() {
11        return false;
12    });
13    $('#btn').click(function() {
14        $('#files').trigger('click');
15    });
16});