WordPressの質問（q10217484）の続

質問

アップロードされたカメラ画像を非表示にするコードを追加したのですが、表示するためのURLを追加するコードが抜けており追加いたしました。
上記とは別にアップロードされたファイルをエンコードするコードも抜けているのではないかと思っております。
旧コードでは対象ファイルではない場合にアラートで警告ダイアログを表示するコードとは別にエンコードするコードがあるため最新コードにも追加すべきではないかと考えております…

下記のコードは追加すべきでしょうか？（single-input.php の15行目から38行目まで）

$attach = [];
if (!empty($_SESSION['attach'])) {
foreach ($_SESSION['attach']['data'] as $i => $data) {
if (!empty($data)) {
$base64 = base64_encode($data);
}
$type = $_SESSION['attach']['type'][$i];
switch ($type) {
case 'image/jpeg':
case 'image/png':
$attach[] = '<img style="height: 100px;" src="data:'.$type.';base64,'.$base64.'">';
break;
case 'video/mp4':
$attach[] = '<video style="height: 100px;" controls src="data:'.$type.';base64,'.$base64.'">';
break;
case 'application/pdf':
$attach[] = '<iframe style="height: 100px;" src="data:'.$type.';base64,'.$base64.'"></iframe>';
break;
default:
$attach[] = '';
break;
}
}
}

※最新コード
https://wandbox.org/permlink/my2wffcXlhMQZFvW

※旧コード
https://wandbox.org/permlink/cfzsJgBFcYrcIDI1

回答No.21

dell_OK

質問➀
両方実装可能です。
質問の意図がわかりませんが、もともとそのように書かれていますよね。

質問➁
記載されたコードの１行目と２行目は画像表示の箇所ではありません。
３行目からが画像表示の処理です。
－－－－
div.appendChild(child); // div の末尾に child を追加
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
div = document.createElement("div");
－－－－

私のサンプルコードの作り方がかなりよくなかったようです。
質問➂のこととあわせて、画像表示の処理を書き直してみます。

汎用的な変数 div は使わないで、階層タグごとに個別の変数を作るようにしたので、どの要素がどの要素に追加されているかがわかりやすくなったと思います。
－－－－変更前
div = document.createElement("div");
for (const i in blobType) {
if (blobType[i] != "") {
child = null;
if (blobType[i] == "img") {
child = document.createElement("img");
} else if (blobType[i] == "video") {
child = document.createElement("video");
child.setAttribute("controls", null);
} else if (blobType[i] == "iframe") {
child = document.createElement("iframe");
}
if (child !== null) {
child.style.maxHeight = "200px";
child.style.maxWidth = "200px";
child.src = blobUrl[i];
div.appendChild(child);
}
}
}
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
－－－－変更後
const image_partial_div = document.createElement("div");
image_partial_div.classList.add("image-partial");
for (const i in blobType) {
if (blobType[i] != "") {
var changeImg = null;
if (blobType[i] == "img") {
changeImg = document.createElement("img");
} else if (blobType[i] == "video") {
changeImg = document.createElement("video");
changeImg.setAttribute("controls", null);
} else if (blobType[i] == "iframe") {
changeImg = document.createElement("iframe");
}
if (changeImg !== null) {
changeImg.classList.add("changeImg");
changeImg.style.maxHeight = "200px";
changeImg.style.maxWidth = "200px";
changeImg.src = blobUrl[i];
const image_camera_icon_div = document.createElement("div");
image_camera_icon_div.classList.add("image-camera-icon");
image_camera_icon_div.appendChild(changeImg);
image_partial_div.appendChild(image_camera_icon_div);
}
}
}
confirm_area.appendChild(image_partial_div); // confirm_area の末尾に div を追加
－－－－

質問➃
参考サイトに書かれているとおりです。
　elm.classList.add("className");
つまり、
　要素.classList.add("クラス");

他のところも汎用的な変数 div を使わないで、個別の変数で要素を作った方がわかりやすくなっていいかも知れません。

お礼

こちらが最新の質問になります。
confirm_area.appendChild(child); と div.appendChild(child); の違いも曖昧なのですが、 div.appendChild(child); は createElement() でHTML 要素を動的に生成する前のタグが div の時に使われるという認識で合ってますでしょうか？

sample.phpを修正してみたのですが、382行目と396行目が何故 confirm_area.appendChild(child); になるのか分からず悩んでおります…

回答No.19の補足に書かせていただいた HTML に間違いがありました申し訳ありません。下記コードでステップフロー画像も確認画面で表示させたいのですが、非同期通信でFont Awesomeアイコンを使う事は難しいでしょうか？　画像にするべきか dell_ok さんにお聞きしたいです。

<div class="board_form_partial" id="js_board_form_partial">
<div class="questionHeader-partial">
<h2><span class="fa-stack"><i class="fa fa-circle fa-stack-2x w-circle"></i><i class="fa-stack-1x fa-inverse q">Q</i></span><span class="q-text">質問する</span></h2>
<div class="other_step">
<img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png" width="364" height="36" alt="STEP1 入力">
</div>
</div>

※表示したいHTML
<div id="confirm_area" style="display: block;">
<div class="board_form_partial" id="js_board_form_partial">
<div class="questionHeader-partial">
<h2><span class="fa-stack"><i class="fa fa-circle fa-stack-2x w-circle"></i><i class="fa-stack-1x fa-inverse q">Q</i></span><span class="q-text">質問する</span></h2>
<div class="other_step">
<img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png" width="364" height="36" alt="STEP1 入力">
</div>
</div>
<div class="title-partial parts"> <!-- title-partial + parts -->
質問タイトルテスト
</div>

<div class="stamp-partial">
<input type="radio" name="stamp" id="confirm_stamp" value="1"><label for="confirm_stamp"></label>
</div>

<div class="namae-partial parts"> <!-- title-partial + parts -->
名前テスト
</div>

<div class="body-partial parts"><!-- body-partial + parts -->
コメントテスト
</div>

<div class="image-partial">

<div class="image-camera-icon">
<img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;">
</div>

<div class="image-camera-icon">
<img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;">
</div>

<div class="image-camera-icon">
<img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;">
</div>
</div>

<div class="post-button"><!-- ボタンを押せなくする -->
<button type="button">入力画面へ戻る</button><button type="button" name="output">結果画面へ進む</button>
</div>
</div>
</div>
<!-- type、name、id、valueの順番 -->
</div>
</div>

※最新コード
https://wandbox.org/permlink/5BfE7DyUtwCNWL2y

補足

解説ありがとうございます。

質問➀についてコードを書いてみたのですが、classとidを同じ div で表示させたい場合 createElement は1つになると思うのですがどうすれば良いのでしょうか？

// class
const board_form_partial_div = document.createElement("div");
// classの追加
board_form_partial_div.classList.add("board_form_partial");
// id
const js_board_form_partial_div = document.createElement('div');
// idの追加
js_board_form_partial_div.id = 'js_board_form_partial_div';

質問➁
createElement() で HTML 要素を動的に生成して、appendChild() で追加する場所を指定、appendChild(child) で子要素として追加という役割で合ってますでしょうか？

質問③④についての修正ありがとうございます。コードを参考に階層タグごとに個別の変数にしてみました。

上記と別に質問があるのですが、child = document.createElement("p"); は必須でしょうか？以前こちらのコードを消した際に順番がおかしくなった気がするのですが、pタグが必要ない場合削除してもよいのでしょうか…？

confirm_area.appendChild(child); // confirm_area の末尾に child を追加　についてのコードの意図が分からないのですが、pタグを追加する場合に必要なのでしょうか？