質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1963閲覧

WordPressのプラグインMW WP Formを使用して、一つのボタンで2つの画像を選択できるようにしたい

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/02/28 07:56

編集2020/03/02 01:59

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>

WordPress上で見たHTML
HTML

この状態だと画像は一つしか選択できないのですが、一つのボタンで2つの画像を選択することは出来ないのでしょうか?

お手数ですがどなたかご教授頂けますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2020/02/29 02:10

実際のページでのHTMLをご提示いただけますか。 また、「画像は一つしか選択できない」とのことですが、具体的には何が起きていますか? 以下のうち、実際に起きている現象と近いものはどれですか? ・ファイルの選択画面で2つ目の選択をすると一つ目が解除される ・ファイル選択画面で複数選択はできるが、アップロードできたのはひとつだけだった
退会済みユーザー

退会済みユーザー

2020/03/02 00:06

返信が遅くなってしまい申し訳ありません。 今載せているHTMLが実際のページで使用しているHTMLです。 画像選択についてですが、ボタンは一つ、選択済みファイル名を表示する箇所が二つある状態で、MW WP Formだと選択自体1つしか出来ません。 その選択できる1つのファイル名は1つ目のファイル名表示箇所に表示されており、二つ目は空白のままになっている状態です。 これをボタン一つのままファイルを二つ選択でき、ファイル名表示箇所にそれぞれ選択したファイル名が表示できるようにしたいです。
Lhankor_Mhy

2020/03/02 01:02

実際のページでのHTMLをご提示いただくことはできませんか?
退会済みユーザー

退会済みユーザー

2020/03/02 01:28 編集

意図が理解できておらず申し訳ありません。 編集したのですがこちらで如何でしょうか?
Lhankor_Mhy

2020/03/02 01:37

分かりにくくて申し訳ありませんが、PHPではなくてHTMLが見たいのです。 [mwform_image type="file" name="filename" id="files" multiple] の部分は実際にページに表示されたときに、このままではないと思うのですが、それがどのようにHTMLに変換されているか、というのはuri__さんには自明であるのかもしれませんが、私には不明であるのです。 よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2020/03/02 01:53

コピペはできないので画像で上げて見ましたがこちらで如何でしょうか?
Lhankor_Mhy

2020/03/02 02:08

コピペができないということはないと思いますが、画像ありがとうございます。 multiple 属性が落ちているようですが、これは想定されているとおりですか? 想定されているとおりであるとすれば、MW WP Form はmultipleを許容していないのではないかと思うのですが、これは構いませんか?
退会済みユーザー

退会済みユーザー

2020/03/02 02:18

multiple 属性が消えているのは想定通りではありません。 multiple 属性を使用してもしなくても、最終的に目的の表示ができれば問題ないのですがMW WP Formでは不可能ということなのでしょうか?
Lhankor_Mhy

2020/03/02 02:24

クライアント側で複数ファイルアップロードを可能にしたとしても、サーバ側で複数アップロードに対応していなければ、送信データが受け入れられない、または欠落する、などの現象が起きるのではないか、と懸念しているのですが、これについてはご検討されましたか? つまり、「最終的に目的の表示ができれば問題ない」とのことですが、「表示さえされればアップロードができなくてもかまわない」という理解で合っていますか?
退会済みユーザー

退会済みユーザー

2020/03/02 02:44

ご丁寧にありがとうございます。 使用しているサーバー(XFREE)が複数アップロード可能かどうかは少し調べた限りではわからなかったのですが、MW WP Formだけでなくサーバーの影響もあるということなのですね・・・ありがとうございます。 また、最終目標は表示だけでなくアップロードも含まれます。
Lhankor_Mhy

2020/03/02 02:51

> MW WP Formだけでなくサーバーの影響もある いえ、そういうことではなくて、サーバサイドスクリプトの問題なのですが、了解いたしました。
Lhankor_Mhy

2020/03/02 03:48

MW WP Form のソースコードを少し読んでみましたが、複数ファイルアップロードには対応していないように見えました。 まず、複数ファイルをアップロードしてお試しになってみるのはいかがでしょうか?
退会済みユーザー

退会済みユーザー

2020/03/02 04:10

ご確認いただきありがとうございます。 「複数ファイルアップロードには対応していない」ということはMW WP Formでは希望の動きをさせることは出来ないということでしょうか? 「複数ファイルをアップロードしてお試しになってみる」というのはボタンを複数用意してそれぞれ選択し、一度にアップロードするということでしょうか?
Lhankor_Mhy

2020/03/02 04:23

> ボタンを複数用意してそれぞれ選択し、一度にアップロードする いえ、それは単体ファイルアップロードを複数やっているだけなので、できると思います。 なので、たとえばデベロッパーズツールでmultiple属性を書き込み、それで試してみる、ということです。
退会済みユーザー

退会済みユーザー

2020/03/02 04:33

デベロッパーズツールでmultipleを追加したら複数選択は出来ました。 URLありがとうございます。 翻訳して見ましたが「1つのファイルのアップロードのみをサポートしています」と書いてありますね・・・ 複数アップロードは諦めようと思います。 色々ありがとうございました! 良ければベストアンサーにさせて頂きたいので、URLを貼っていただいた返信を解答欄にもご記載いただけないでしょうか?
Lhankor_Mhy

2020/03/02 09:27

結局解決していないので、自己解決にしていただけませんか?
guest

回答1

0

ベストアンサー

MW WP Formでは出来ないようなので諦めます。

投稿2020/03/03 07:02

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問