WordPressの質問（q10135525）の続

質問

名前に50文字で文字数制限を設けたいのですが、メッセージの500文字の文字数制限のコードとまとめるべきでしょうか？

※現在のデザイン
http://www.irasuto.cfbx.jp/%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%83%86%e3%82%b9%e3%83%88/

※現在のコード
https://wandbox.org/permlink/9nnn2wsXBXo9CgdG

※single-index.php
const NAME_MAX_LENGTH = 50;

※single-input.php
<div id="name_partial"></div>

<script>
const name_partial = document.getElementById('name_partial');
name.addEventListener('input', contactForm);

contactForm();
function contactForm() {
const contactsignature = <?php echo NAME_MAX_LENGTH; ?> ;
const input = contactsignature - name.value.length;
if (input >= 0) {
name.innerHTML = 'あと<strong>' + input + '</strong>文字';
submit_button.disabled = name.value.length === 0;
} else {
name.innerHTML = '<strong class="err">' + -input + '</strong>文字超過しています';
submit_button.disabled = true;
}
}
</script>

回答No.39

dell_OK · ベストアンサー

No such file or directory
そのようなファイル、又はディレクトリはありません
home/vqnporqs/public_html/wp-content/uploads/attach/3_0.jpeg
attachディレクトリがないとか。

お礼

質問の期限が切れてしまいました、申し訳ありません。
下記のURLからアドバイスお願い致します。

https://okwave.jp/qa/q10155839.html

補足

アドバイスありがとうございます、attachディレクトリを追加したところ表示することが出来ました。

不正なトークンと表示されるため、single-regist.phpから下記のコードを削除したのですが、そちらは問題ないでしょうか？
送信時にトークンが必要だと思いますので、登録結果画面には必要ないのではないかと考えております。

//確認画面でデータが安全であることが確認された上で$_SESSIONを経由して画面遷移するが、登録結果画面へは不正アクセスできるから必須
if (empty($_SESSION['token']) || empty($_POST['token']) || $_SESSION['token'] !== $_POST['token']) {
exit('不正トークン');
}

※single-regist.phpの11行目からトークンのコードになります
https://wandbox.org/permlink/vCbUEZFcvQf2n1DK

回答No.18

dell_OK

・inputFileはidでhideItemsはclassで設定する必要があるようです。

なぜそう思ったのですか。

補足

回答ありがとうございます、自分でも意味をよく理解できていなかったのですが、調べたところclassは必要ないようですね…
single-input.phpを修正いたしました。

参考サイトを見ると.classList.removeはくっつけて問題ないように見えるのですが、初めに教しえて頂いたsample.phpのコードでは、.addEventListenerは分かれているように見えます。

修正後のsingle-input.phpのような書き方で問題ないでしょうか？

※参考サイト
https://qiita.com/tomokichi_ruby/items/2460c5902d19b81cace5

※修正後のコード
https://wandbox.org/permlink/lUVmLOdR51KlbH0R

回答No.17

dell_OK

idを使う必要はありません。
変更箇所は比較して確認してください。
－－－－
<script>
window.addEventListener('DOMContentLoaded', function () {
const inputFile = document.querySelectorAll('.inputFile'); // 入力される画像
const changeImg = document.querySelectorAll('.changeImg');// 入力されたら消す画像
const viewFile = document.querySelectorAll('.viewFile'); // 入力されたら表示する画像
const fileHeight = "100px" // 置き換えた後のファイルの高さ
const resetButtons = document.querySelectorAll('.attachclear');
for (let i = 0; i < changeImg.length; i++) {
inputFile[i].addEventListener('change', e => {
const fileDate = inputFile[i].files.item(0);
if (fileDate.size > 15 * 1024 * 1024) {
return alert('ファイルサイズが 15MBバイトを超えています');
}
const fileType = fileDate.type;
let newElement;
if (['image/jpeg', "image/png"].includes(fileType)) {
newElement = document.createElement('img');
} else if (fileType === 'video/mp4') {
newElement = document.createElement('video');
newElement.controls = true;
} else if (fileType === 'application/pdf') {
newElement = document.createElement("iframe");
} else {
return alert("対象外のファイルです");
}
changeImg[i].classList.add('hideItems'); // もともとの画像を消す
newElement.style.height = fileHeight;
newElement.src = URL.createObjectURL(fileDate);
viewFile[i].appendChild(newElement);
})
}
})
</script>
－－－－

補足

修正ありがとうございます。inputFile[i]をつけてイベント設定するんですね。
1点お聞きしたいのですが、もともとアドバイス頂いたコードを自分なりに考えていたので、classの修正が必要なようです。
元のコードはsample.phpに掲載いたしました。inputFileはidでhideItemsはclassで設定する必要があるようです。

別途ボタンで別のイベントが必要なため追加してみたのですが、ボタンの.addEventListenerにも(changeImg[i])入力されたら消す画像のイベント設定は必要なのでしょうか？

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

回答No.16

dell_OK

・少し分岐するためにコードを変えたのですが、アップロードが2つある場合に対応できているか分かりません、問題ないでしょうか？

エラーが発生しているので問題ありですね。
動作が今までと違うようですが、これであっているのですか。

補足

回答ありがとうございます、すこし変更いたしました。
以前の方法ですと、INPUT要素に入力されたinput.file.typeを取得すると、MIMEタイプが返されるためそれで分岐するような形になるようです。
恐らく前回のコードをそれぞれのファイル形式に対応するように考えた方が良さそうです。

※参考サイト
https://www.javadrive.jp/javascript/form/index8.html

今回考えた方法はファイルの種類の分岐が分からなかったため、そちらに対応したコードを考えております。
要素が1つにしか対応できていないため、複数に対応するように考えている途中になります。

idを設定せずにclassを設定することにより複数要素にイベントを設定する方法で考えているのですが、入力される画像と入力される画像を消す場合idとclassの両方が必要なため苦戦しております。

※参考サイト
https://web-engineer-wiki.com/javascript/addeventlistener-multi/

https://wandbox.org/permlink/xyeQ2urRFKvoIrvi

回答No.15

dell_OK

・XMLHttpRequestオブジェクトで読み込んで判定するような流れになるのでしょうか？

Ajaxは使いません。
分岐処理は以前と同じような方法でいいと思います。

補足

回答ありがとうございます、少し分岐するためにコードを変えたのですが、アップロードが2つある場合に対応できているか分かりません、問題ないでしょうか？

<form method="post">
<div class="contents-selector-button">
<label for="inputFile" id="viewFile">
<div><img src="img/camera.jpg" id="changeImg" style="height: 100px;"></div>
</label>
<input type="file" id="inputFile" class="hideItems" accept=".png, .jpg, .jpeg, .pdf, .mp4">
</div>

<button type="button" class="attachclear">clear</button>
<!--<div class="viewer"></div>-->
</form>

<script>
const inputFile = document.getElementById('inputFile'); // 入力される画像
const changeContents = document.getElementById('changeContents');// 入力されたら消す画像
const viewFile = document.getElementById('viewFile'); // 入力されたら表示する画像
const fileHeight = "100px" // 置き換えた後のファイルの高さ

const resetButtons = document.querySelectorAll('.attachclear');

/* 入力される（NodeList）から1つのノードを取得 */
inputFile.addEventListener('change', e => {
const fileDate = inputFile.files.item(0);

if (fileDate.size > 15 * 1024 * 1024) {
return alert('ファイルサイズが 15MBバイトを超えています');
}

const fileType = fileDate.type;
/* 新しい要素を取得 */
let newElement;
/* includes() メソッドは、特定の要素が配列に含まれているかどうかを true または false で返す */
if (['image/jpeg', "image/png"].includes(fileType)) {
/* tagName で指定された HTML 要素を生成 */
newElement = document.createElement('img');
} else if (fileType === 'video/mp4') {
newElement = document.createElement('video');
newElement.controls = true;
} else if (fileType === 'application/pdf') {
newElement = document.createElement("iframe");
} else {
return alert("対象外のファイルです");
}

/* 特定の要素のクラス名を追加したり、削除したり、参照したりする */
changeImg.classList.add('hideItems'); // もともとの画像を消す
/* element.style.height - 高さ */
newElement.style.height = fileHeight;
newElement.src = URL.createObjectURL(inputFile.files.item(fileDate));
/* 入力されたら表示する画像(親要素)に子要素を追加 */
viewFile.appendChild(newElement);
})

/* 与えられた関数を、配列の各要素に対して一度ずつ実行 */
resetButtons.forEach(button => {
button.addEventListener('click',e => {
const nextElement = changeContents.nextElementSibling; // changeContents(入力されたら消える画像)の次の要素
if(nextElement) {
/* 特定の要素のクラス名をremove()で自分自身の要素を削除する */
changeContents.classList.remove('hideItems')
nextElement.remove();
}
})
});

</script>

回答No.14

dell_OK

・PDFの方も考えてみたのですが、下記の const img の部分は const pdf でしょうか？カメラ画像に関係あるのであればimgだと思うのですが。
・下記の部分を調べてみたところPDFの場合はiframe.srcになるのでしょうか？embed srcというのもあってどれが正しいのか分からない状態です。

imgでもpdfでもなんでもいいのです。
わかりやすいものにするといいです。
以前、プレビュー処理を作りましたよね。
ここから先に共通処理があるので child でしました。
それから、その時は iframe を使いました。
－－－－
var child = null;
if (reader.result.indexOf("data:image/jpeg;base64,") === 0 ||
reader.result.indexOf("data:image/png;base64,") === 0) {
child = document.createElement("img");
} else if (reader.result.indexOf("data:video/mp4;base64,") === 0) {
child = document.createElement("video");
child.setAttribute("controls", null);
} else if (reader.result.indexOf("data:application/pdf;base64,") === 0) {
child = document.createElement("iframe");
－－－－

補足

A.回答ありがとうございます、分かりやすいもので考えてみました。
/* 画像、動画、PDF　Element を作成 */より下の文で分岐が必要になってくるのですが、XMLHttpRequestオブジェクトで読み込んで判定するような流れになるのでしょうか？

※参考サイト
https://gray-code.com/javascript/load-file-with-xml-http-request/

<style>
/* 通常時 */
form > div { display: flex; }
.contents-selector-button {
position: relative;
margin: .3em;
}
.contents-selector-button label img {/*カメラ画像に対してのcss*/
width: 200px; height: 100px;
}
.contents-selector-button input { display: none; }

/* 画像、動画、PDF表示時のレイアウト */
.contents-selector-button.contents-on label { visibility: hidden; }
.contents-selector-button.contents-on .viewer {
position: absolute;
top:0; left: 0;
width: 100%; height: 100px;
overflow: hidden;
}
</style>
</head>

<body>
<form method="post">
<div>
<div class="contents-selector-button">
<label>
<div><img src="img/camera.jpg"></div>
<input type="file" accept=".png, .jpg, .jpeg, .pdf, .mp4">
</label>
<input type="hidden">
<button type="button">clear</button>
<div class="viewer"></div>
</div>
</div>
</form>

<script>
(()=>{
const
fileTypes = ['image/jpeg','image/png','video/mp4','application/pdf'],
wrap = document.querySelector('form > div'),
P = e => e.closest('.contents-selector-button'),
V = e => P(e).querySelector('.viewer'),
C = (e, s) => P(e).classList[s]('contents-on');

for(let i = 0; i<3; i++)
wrap.appendChild(wrap.firstElementChild.cloneNode(1));

/* クリアボタン */
wrap.addEventListener('click', (e, t = e.target) => {
if(t.nodeName != 'BUTTON' || t.type != 'button') return;
V(t).innerHTML = '';
C(t, 'remove');
});

/* 画像、動画、PDF登録 */
wrap.addEventListener('change', (e, t = e.target) => {
if(t.nodeName != 'INPUT' || t.type != 'file') return;
if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return;

/* 画像、動画、PDF　Element を作成 */
const img = document.createElement('img,video,pdf');
video.src = URL.createObjectURL(t.files[0]);
video.style.height = '100px';
V(t).appendChild(video);
C(t, 'add');
});
})();
</script>

回答No.13

dell_OK

・removeと書くと長文になるのでsと略しているという感じでしょうか。

そんな感じで、再利用と簡略が目的だと思います。

たぶんですが、展開していくとこうなると思います。

C(t, 'remove')
→P(t).classList['remove']('image-on')
→t.closest('.image-selector-button').classList['remove']('image-on')

C(t, 'add')
→P(t).classList['add']('image-on')
→t.closest('.image-selector-button').classList['add']('image-on')

補足

A.詳しく解説いただきありがとうございます、理解できました。

回答No.12

dell_OK

・consoleが使われており不安でimg.style.heightをvideo.style.heightに置き換えてみました。どちらが正しいのでしょうか？

consoleは確認用のコードだと思います。
何か処理しているわけではないと思います。

いただいたコードは思ってた以上に変更されていますね。
それはいいとして、ちょっと変更すると、それらしく動作確認できました。
－－－－変更前
const img = document.createElement('mp4');
－－－－変更後
const video = document.createElement('video');
－－－－

補足

Q.consoleは確認用のコードだと思います。
何か処理しているわけではないと思います。

－－－－変更前
const img = document.createElement('mp4');
－－－－変更後
const video = document.createElement('video');
－－－－

A.修正ありがとうございます、pdfのコードを考えてみて最終的に3つをまとめるようにしてみます。

______________________________________________________________________

PDFの方も考えてみたのですが、下記の const img の部分は const pdf でしょうか？カメラ画像に関係あるのであればimgだと思うのですが。

/* PDF Element を作成 */
const img = document.createElement('pdf');

下記の部分を調べてみたところPDFの場合はiframe.srcになるのでしょうか？embed srcというのもあってどれが正しいのか分からない状態です。

※参考サイト
https://abhp.net/hp/HP_HTML_600000.html
https://qiita.com/7shi/items/6daf22b6929d6187a22a

/* 動画ファイルまでの URL アドレスを指定 */
video.src = URL.createObjectURL(t.files[0]);
↓
iframe.src = URL.createObjectURL(t.files[0]);

※PDFに対応したコード
<style>
/* 通常時のレイアウト */
form > div { display: flex; }
.pdf-selector-button {
position: relative;
margin: .3em;
}
.pdf-selector-button label img {/*カメラ画像に対してのcss*/
デザイン3
width: 200px; height: 100px;
}
.pdf-selector-button input { display: none; }

/* 画像表示時のレイアウト */
.pdf-selector-button.pdf-on label { visibility: hidden; }
.pdf-selector-button.pdf-on .viewer {
position: absolute;
top:0; left: 0;
width: 100%; height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<form method="post">
<div>
<div class="pdf-selector-button">
<label>
<div><img src="img/camera.jpg"></div>
<input type="file" accept=".pdf">
</label>
<input type="hidden">
<button type="button">clear</button>
<div class="viewer"></div>
</div>
</div>
</form>

<script>
(()=>{
const
fileTypes = ['application/pdf'],
/* 指定したHTML要素で対象の要素を囲む */
/* 特定の要素内の子要素を取得 form内のdiv要素を取得 */
wrap = document.querySelector('form > div'),
/* 直近の親要素を「closest」で取得 */
P = e => e.closest('.pdf-selector-button'),
V = e => P(e).querySelector('.viewer'),
/* 特定の要素のクラス名を追加、削除、参照することが出来る便利なプロパティ */
C = (e, s) => P(e).classList[s]('pdf-on');

for(let i = 0; i<3; i++)
/* 特定の親要素の中に要素を追加する */
/* firstElementChildは最初の子要素を取得 */
/* Node オブジェクトのコピー（複製）を作成 */
wrap.appendChild(wrap.firstElementChild.cloneNode(1));

/* クリアボタン */
wrap.addEventListener('click', (e, t = e.target) => {
if(t.nodeName != 'BUTTON' || t.type != 'button') return;
V(t).innerHTML = '';
C(t, 'remove');
});

/* PDF登録 */
wrap.addEventListener('change', (e, t = e.target) => {
/* Node の読み取り専用プロパティ、現在のノードの名前を文字列で返す */
if(t.nodeName != 'INPUT' || t.type != 'file') return;
if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return;

/* PDF Element を作成 */
const img = document.createElement('pdf');
/* PDFファイルまでの URL アドレスを指定 */
pdf.src = URL.createObjectURL(t.files[0]);
pdf.style.height = '100px';
V(t).appendChild(pdf);
C(t, 'add');
});
})();
</script>

回答No.11

dell_OK

・.files.lengthどちらも該当するものがなく何を指しているのか分かりませんでした、

「files.length」で検索するといくつか出てきます。
JavaScriptのことで検索して出てくるＭＤＮのものはなるべく読んでみてください。

https://developer.mozilla.org/ja/docs/Web/API/FileList/length
こちらによると、「FileList の読み取り専用プロパティ length は、FileList に含まれるファイルの数を返します。」とあります。
調べたのは files なのに FileList なんて関係ないと思われるかも知れませんが、少なくとも file の文字はあるので関係あるかもと思ってみます。

FileListがなんなのかわかりませんがリンクがあるので見てみる。
https://developer.mozilla.org/ja/docs/Web/API/FileList
「この型のオブジェクトは、 HTML の <input> 要素の files プロパティで返されます。これにより、 <input type="file"> 要素で選択されているファイルのリストにアクセスすることができます。」
なんかとても関係ありそうな説明です。

実体は FileList と言うもののようですが、その内容を参照するには files プロパティを使うと言うことのようです。
Chromeの開発者モードで確認するとよくわかるのですが、割愛します。

filesには<input type="file">で選択されたファイルのようです。
なぜfilesと複数形になっているのかと言うと <input type="file" multiple>と書けば複数のファイルを選択できるからです。

それでと「t.files.length == 0」の話しになりますが、tがなんなのかはわかっているとして。
選択されたファイルの数が０、つまり、ファイルが選択されていない、と言う意味になります。

・!fileTypes.includesも該当する記事がなく意味が分からず

! は not 否定の意味です。
ひと続きで考えない方がいいです。

fileTypes は const で定義されています。
　fileTypes = ['image/jpeg', 'image/png'],
ふたつの文字列が定義された配列です。

「javascript includes」で検索して出てきたＭＤＮ。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
「includes() メソッドは、特定の要素が配列に含まれているかどうかを true または false で返します。」

つまり「fileTypes.includes(t.files[0].type))」は、
t.files[0].typeの値が、['image/jpeg', 'image/png']の中に含まれているか、です。

t.filesは、先に出てきましたね。
選択されたファイル配列[0]番目です。
ひとつしか選択していなくても配列です。
その最初のもの。

FileListの要素ひとつずつはFileオブジェクトです。
https://developer.mozilla.org/ja/docs/Web/API/File
.type は、
https://developer.mozilla.org/ja/docs/Web/API/File/type
「File オブジェクトによって表されるファイルのメディアタイプ (MIME) を返します。」

つまり、選択したファイルのメディアタイプが、'image/jpeg'か'image/png'であれば true になります。

それに ! が付くと、そうではない、と言うことになります。

if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return;
ファイルが選択されていない、または（||）、ファイルのメディアタイプが'image/jpeg'でも'image/png'でもない、場合は、戻る（return）。

補足

Q.こちらによると、「FileList の読み取り専用プロパティ length は、FileList に含まれるファイルの数を返します。」とあります。
調べたのは files なのに FileList なんて関係ないと思われるかも知れませんが、少なくとも file の文字はあるので関係あるかもと思ってみます。

A.回答ありがとうございます、FileListで調べてみることは考えておりませんでした。確かにファイルの数といわれると何となく役割がイメージできそうです。

Q.「この型のオブジェクトは、 HTML の <input> 要素の files プロパティで返されます。これにより、 <input type="file"> 要素で選択されているファイルのリストにアクセスすることができます。」
なんかとても関係ありそうな説明です。
なぜfilesと複数形になっているのかと言うと <input type="file" multiple>と書けば複数のファイルを選択できるからです。

A.説明ありがとうございます、理解することが出来ました。

Q.それでと「t.files.length == 0」の話しになりますが、tがなんなのかはわかっているとして。
選択されたファイルの数が０、つまり、ファイルが選択されていない、と言う意味になります。
! は not 否定の意味です。ひと続きで考えない方がいいです。

A.回答ありがとうございます、ファイルが選択されていない場合という意味だったんですね。
! 単体では意味は理解できていたんですが、1まとまりで考えておりました…

Q.「includes() メソッドは、特定の要素が配列に含まれているかどうかを true または false で返します。」

つまり「fileTypes.includes(t.files[0].type))」は、
t.files[0].typeの値が、['image/jpeg', 'image/png']の中に含まれているか、です。

if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return;
ファイルが選択されていない、または（||）、ファイルのメディアタイプが'image/jpeg'でも'image/png'でもない、場合は、戻る（return）。

A.回答ありがとうございます、理解できました。選択されたファイルの配列を['image/jpeg', 'image/png']に該当しているかどうか調べて、選択されてない場合該当しない場合は戻るという事ですね。

回答No.10

dell_OK

・恐らく問題ないと思うのですが、>を使う場合、formに指定されているmethod名「post」のdivと書くべきではないのでしょうか？

それはいらないと思います。

・P,V,C のコードの流れがよくわからないのですが、こちらのコードは何をしているのでしょうか？

私にもわかりません。
最初の頃にも言いましたが、私はJavaScriptに詳しくないです。
おそらく簡易的に書いているだけのことだと思うのですが、記号が並ぶと難しく見えてきます。
こちらなど読んでみてください。
https://it-biz.online/web-design/arrow-function/

・.classListにsを指定した意図も分からず教えて頂きたいです。

どうも(e,s)は引数のようで、sは第二引数です。
定義されている関数Cを使っているところでは、
C(t, 'remove') とかになっているので、
sには第二引数の'remove'が渡されているので、
classList['remove']と言うことになると思います。

補足

Q.こちらなど読んでみてください。
https://it-biz.online/web-design/arrow-function/

A.回答ありがとうございます、なんとなく理解することが出来ました。

・.classListにsを指定した意図も分からず教えて頂きたいです。

Q.どうも(e,s)は引数のようで、sは第二引数です。
定義されている関数Cを使っているところでは、
C(t, 'remove') とかになっているので、
sには第二引数の'remove'が渡されているので、
classList['remove']と言うことになると思います。

A.説明ありがとうございます、removeと書くと長文になるのでsと略しているという感じでしょうか。

回答No.9

dell_OK

・2つめのコードで動画を表示させることは可能でしょうか？

可能だと思います。
やってみないと確かなことは言えないので今はコードを提示できません。

まずは質問者さまが試してみてください。
考え方のヒントとしては、まず、動画専用のものに改造してみることです。
画像用の文字列を動画用のものにしてみてください。
jpgとか、'image/jpeg'とか、'img'とかのところです。

それで成功すれば、画像用に動画用の文字列を追加してみます。
その中で、画像用と動画用で違うところは分岐処理が必要になってくるかも知れません。
そんな感じで、改造していくといいと思います。
ひとつひとつコードを理解していく勉強にもなると思います。

・下記のコードはすべて教えて頂いたコードに変えても良いのでしょうか？
cssをどこに書けばよいのか分からないので、アドバイス頂きたいです。

すべて変えてください。

最新のコードは壊れ気味です。

スタイルシートは外に出して、名前とコメントが続きます。
<div class="msg_partial">は入力コントロールの直後に配置する必要があります。
－－－－
<style>
.msg_partial {
text-align: right;
color: #333;
margin: 0 15px 20px 0;
}

.msg_partial strong {
color: #e52d77;
}
</style>
<div class="title-partial">
<h2>名前(name)<span class="required">※必須</span></h2>
<input class="length_input" data-maxlength="<?php echo MAX_LENGTH::NAME; ?>" type="text" name="namae" id="name" placeholder="未入力の場合は、匿名で表示されます" value="<?php echo $namae; ?>">
<div class="msg_partial"></div>
</div>
<div class="body-partial">
<h2>コメント(comment)<span class="required">※必須</span></h2>
<textarea class="length_input" data-maxlength="<?php echo MAX_LENGTH::MESSAGE; ?>" name="message" id="message" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"><?php echo $message; ?></textarea>
<div class="msg_partial"></div>
</div>
－－－－

補足

Q.考え方のヒントとしては、まず、動画専用のものに改造してみることです。
画像用の文字列を動画用のものにしてみてください。
jpgとか、'image/jpeg'とか、'img'とかのところです。

A.アドバイスありがとうございます、まずは動画のほうで考えてみます。

Q.スタイルシートは外に出して、名前とコメントが続きます。
<div class="msg_partial">は入力コントロールの直後に配置する必要があります。

A.回答ありがとうございます、変更いたしました。ひとまず分岐を考えずに動画で考えてみたのですが、分からないところがあり質問させていただきます。

※恐らく問題ないと思うのですが、>を使う場合、formに指定されているmethod名「post」のdivと書くべきではないのでしょうか？
※参考サイト
https://1-notes.com/javascript-queryselectorall-and-queryselector/

/* 特定の要素内の子要素を取得 method名「post」内のdiv要素を取得 */
wrap = document.querySelector('form > div'),

1,P,V,C のコードの流れがよくわからないのですが、こちらのコードは何をしているのでしょうか？.classListにsを指定した意図も分からず教えて頂きたいです。
主なclassListのメソッドにないものなのでコードが働いていないように見えています。
=>についても分からないため教えて頂きたいです。

※参考サイト
https://qiita.com/tomokichi_ruby/items/2460c5902d19b81cace5

P = e => e.closest('.video-selector-button'),
V = e => P(e).querySelector('.viewer'),
C = (e, s) => P(e).classList[s]('video-on');

2,下記の構文を調べてみたのですが、.files.lengthどちらも該当するものがなく何を指しているのか分かりませんでした、!fileTypes.includesも該当する記事がなく意味が分からず…教えて頂きたいです。
if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return;

3,動画のURLアドレスを指定や高さなどを指定するコードを見つけたのですが、consoleが使われており不安でimg.style.heightをvideo.style.heightに置き換えてみました。どちらが正しいのでしょうか？

※参考サイト
https://hakuhin.jp/js/video.html

※.appendChild(video)を確認
https://cly7796.net/blog/javascript/precautions-for-embedding-autoplay-video-with-javascript/

video.style.height = '100px';
↓
// 動画の高さを取得する
console.log(video.videoHeight);

______________________________________________________________________

※動画に対応したコード
<style>
/* 通常時のレイアウト */
form > div { display: flex; }
.video-selector-button {
position: relative;
margin: .3em;
}
.video-selector-button label img {/*カメラ画像に対してのcss*/
デザイン3
width: 200px; height: 100px;
}
.video-selector-button input { display: none; }

/* 画像表示時のレイアウト */
.video-selector-button.video-on label { visibility: hidden; }
.video-selector-button.video-on .viewer {
position: absolute;
top:0; left: 0;
width: 100%; height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<form method="post">
<div>
<div class="video-selector-button">
<label>
<div><img src="img/camera.jpg"></div>
<input type="file" accept=".mp4">
</label>
<input type="hidden">
<button type="button">clear</button>
<div class="viewer"></div>
</div>
</div>
</form>

<script>
(()=>{
const
fileTypes = ['video/mp4'],
/* 指定したHTML要素で対象の要素を囲む */
/* 特定の要素内の子要素を取得 method名「post」内のdiv要素を取得 */
wrap = document.querySelector('form > div'),
/* 直近の親要素を「closest」で取得 */
P = e => e.closest('.video-selector-button'),
V = e => P(e).querySelector('.viewer'),
/* 特定の要素のクラス名を追加、削除、参照することが出来る便利なプロパティ */
C = (e, s) => P(e).classList[s]('video-on');

for(let i = 0; i<3; i++)
/* 特定の親要素の中に要素を追加する */
/* firstElementChildは最初の子要素を取得 */
/* Node オブジェクトのコピー（複製）を作成 */
wrap.appendChild(wrap.firstElementChild.cloneNode(1));

/* クリアボタン */
wrap.addEventListener('click', (e, t = e.target) => {
if(t.nodeName != 'BUTTON' || t.type != 'button') return;
V(t).innerHTML = '';
C(t, 'remove');
});

/* 画像登録 */
wrap.addEventListener('change', (e, t = e.target) => {
/* Node の読み取り専用プロパティ、現在のノードの名前を文字列で返す */
if(t.nodeName != 'INPUT' || t.type != 'file') return;
if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return;

/* VideoElement を作成 */
const img = document.createElement('mp4');
/* 動画ファイルまでの URL アドレスを指定 */
video.src = URL.createObjectURL(t.files[0]);
video.style.height = '100px';
V(t).appendChild(video);
C(t, 'add');
});
})();
</script>