WordPressのプラグインMW WP Formを使用して、一つのボタンで2つの画像を選択できるようにしたいです。
オリジナルテーマを作成している最中なのですが、HTML、CSS、Javascriptでは下記の状態で希望の状態にしていました。
HTML
1<form action="#" method="post" enctype="multipart/form-datta"> 2 <table> 3 <tbody> 4 <tr> 5 <td> <div id="btn">画像を選択</div> 6 <input type="file" name="filename" id="files" multiple></td> 7 <td class="image_box"><input type="text" id="filename" placeholder="選択されていません" readonly></td> 8 </tr> 9 <tr> 10 <td></td> 11 <td class="image_box"><input type="text" id="filename2" placeholder="選択されていません" readonly></td> 12 </tr> 13 </tbody> 14 </table> 15</form>
CSS
1form{ 2 width: 90%; 3 margin: auto; 4} 5.files{ 6 background: none; 7 box-shadow: none; 8 border: none; 9} 10 11#btn{ 12 background-color: #838383; 13 color: white; 14 content: "画像を選択"; 15 cursor: pointer; 16 width: 140px; 17 height: 30px; 18 display: inline-block; 19 border-radius: 50px; 20 display: flex; 21 justify-content: center; 22 align-items: center; 23 float: left; 24 font-size: 15px; 25} 26 27#filename, 28#filename2{ 29 display: inline-block; 30 width: 90%; 31 height: 30px; 32 background-color: #EFF7FF; 33 border-radius: 6px; 34 border-color: #707070; 35 border-width: thin; 36 padding: 5px; 37 pointer-events: none; 38} 39table{ 40 margin-top: 50px; 41} 42 43.image_box{ 44 width: 100%; 45 padding: 0 0 10px 50px; 46} 47 48td{ 49 padding-bottom: 10px; 50}
Javascript
1$(function() { 2 $('#files').css({ 3 'position': 'absolute', 4 'top': '-9999px' 5 }).change(function() { 6 var $files = $(this).prop('files'); 7 $('#filename').css("display", "inline-block"); 8 $('#filename').val( (typeof( $files[0] ) != 'undefined' )? $files[0].name : "" ); 9 10 $('#filename2').css("display", "inline-block"); 11 $('#filename2').val( (typeof( $files[1] ) != 'undefined' )? $files[1].name : "" ); 12 }); 13 $('#filename','#filename2').bind('keyup, keydown, keypress', function() { 14 return false; 15 }); 16 $('#btn').click(function() { 17 $('#files').trigger('click'); 18 }); 19});
これをMW WP Form用に変更して以下のようにしました。
(Javascriptはそのままアップロードしています。)
<table> <tbody> <tr> <td> <div id="btn">画像を選択</div> [mwform_image 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> </tbody> </table>
この状態だと画像は一つしか選択できないのですが、一つのボタンで2つの画像を選択することは出来ないのでしょうか?
お手数ですがどなたかご教授頂けますと幸いです。
回答1件
あなたの回答
tips
プレビュー