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.28

dell_OK

・削除いたしました。

}が残っています。

おかしいところ、その１。
ボタンは、
const resetButtons = document.querySelectorAll('.attachclear'); //押されたらファイルをリセットする
なので、
button[i].addEventListener(
は
resetButtons[i].addEventListener(
です。
もしくは、こちら側をこうするか。
const button = document.querySelectorAll('.attachclear'); //押されたらファイルをリセットする

おかしいところ、その２。
－－－－
const nextElement = changeImg[i].nextElementSibling; { // changeImgの次の要素 if (nextElement)
－－－－
if()がコメントになっていますが、必要なものなのかどうか。

おかしくはなさそうだけど直した方がよさそうなところ。
－－－－
changeImg[i].classList.remove('hideItems') nextElement.remove();
－－－－
changeImg[i].classList.remove('hideItems');
nextElement.remove();
－－－－

お礼

すべてのファイルをまとめてみたのですが、送信ボタンも消えてしまい、カメラ画像も表示された状態でclearボタンも機能しなくなってしまいました…
以前質問させていただいたコードの方で再度考えてみようと思っております…

※現在の表示画面
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※最新ファイル
https://wandbox.org/permlink/CBcBtRXxhcd2uaC0

補足

修正ありがとうございます。すべてのファイルをまとめてみます。

回答No.27

dell_OK

まとめかたはよかったのですが、
なにかちょっとエラーになってます。

回答No.26

dell_OK

・まとめてみたのですが問題ないでしょうか？

問題なさそうです。

ついでにループもひとつにまとめてもいい気がします。
まんなか辺のここを削除します。
－－－－
}
for (let i = 0; i <
attachclear.length; i++) {
－－－－

もしかして、前の質問でまとめると言われてたのはこっちのことだったですかね。

補足

回答ありがとうございます、削除いたしました。
https://wandbox.org/permlink/TsE2IXlKr0sk3skN

回答No.25

dell_OK

・今回の2つのイベントをまとめることは可能なのでしょうか？
カメラ画像(inputFile[i].addEventListener)ボタン(button[i].addEventListener)

できません。
まとめられるのは、
window.addEventListener('DOMContentLoaded',
の方です。

・changeImgとviewFileにも[i]をつけているのは上記と同様にファイルアップロード機能が複数あるからでしょうか？

inputFile[0]でファイルが選択されたら、changeImg[0]を隠し、viewFile[0]に表示する。
inputFile[1]でファイルが選択されたら、changeImg[1]を隠し、viewFile[1]に表示する。
と言う処理です。

どう説明したらいいのかわかりませんが、[i]を使わない（ループしない）書き方で意味がわかるでしょうか。
－－－－
const inputFile = document.querySelectorAll('.inputFile'); // 入力される画像
const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像
const viewFile = document.querySelectorAll('.viewFile'); // 入力されたら表示する画像
const fileHeight = "100px" // 置き換えた後のファイルの高さ
inputFile[0].addEventListener('change', e => {
const fileDate = inputFile[0].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[0].classList.add('hideItems'); // もともとの画像を消す
newElement.style.height = fileHeight;
newElement.src = URL.createObjectURL(fileDate);
viewFile[0].appendChild(newElement);
});
inputFile[1].addEventListener('change', e => {
const fileDate = inputFile[1].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[1].classList.add('hideItems'); // もともとの画像を消す
newElement.style.height = fileHeight;
newElement.src = URL.createObjectURL(fileDate);
viewFile[1].appendChild(newElement);
});
－－－－
[0]と[1]が違うだけで他は全く同じです。
アップロードファイルが２つならこれでもいいですが、１０個とかになると、[2]と[3]と[4]・・・[9]って１０倍ほど長いコードになります。
これを簡単にするためにループして[i]で書いているだけです。

補足

Q.できません。
まとめられるのは、
window.addEventListener('DOMContentLoaded',
の方です。

A.回答ありがとうございます、まとめてみたのですが問題ないでしょうか？

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

Q.inputFile[0]でファイルが選択されたら、changeImg[0]を隠し、viewFile[0]に表示する。
inputFile[1]でファイルが選択されたら、changeImg[1]を隠し、viewFile[1]に表示する。
と言う処理です。

[0]と[1]が違うだけで他は全く同じです。
アップロードファイルが２つならこれでもいいですが、１０個とかになると、[2]と[3]と[4]・・・[9]って１０倍ほど長いコードになります。
これを簡単にするためにループして[i]で書いているだけです。

A.説明ありがとうございます、アドバイスを参考にリセットボタンのイベントで考えてみたところ意味を理解することが出来ました。
button[0]でファイルが選択されたら、changeImg[0]を隠す。
button[1]でファイルが選択されたら、changeImg[1]を隠す。

回答No.24

dell_OK

画像を添付し忘れました。

補足

画像確認いたしました、ありがとうございます。

回答No.23

dell_OK

・カメラ画像のイベントのコードはconst 〇〇 に該当するinputFile[i]とchangeImg[i]とviewFile[i]にイベント設定をされているのかと考えました。

そうではありません。
見るところが少し間違っています。

constは変数を定義しているだけで、イベントとは直接関係ありません。

イベントを設定しているのはここです。
inputFile[i].addEventListener
つまり、イベントが設定されているのは　inputFile[i]　です。
changeImg[i]とviewFile[i]にはイベントはありません。

いつ発生するイベントかと言うと、
inputFile[i].addEventListener('change'
つまり、inputFile[i]がchange（変わった）時です。

書かれている部分を見てみます。
window.addEventListener('DOMContentLoaded',

イベントが設定されているのは　window　で、
発生するのは　DOMContentLoaded　の時です。
https://developer.mozilla.org/ja/docs/Web/API/Window/DOMContentLoaded_event
「DOMContentLoaded イベントは、最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。」

これがいつなのか、言葉ではよくわかりませんが、スタイルシート、画像、サブフレームと言った目に見えるものの読み込みが完了するのを待たないそうなので、文書の読み込みと解析が完了したら、とにかくやってくれと言うことです。
つまり、その実行によって見た目が直接変わるようなことは書かないつもりだ、と言うことでもあります。
おそらくですが、たいていの場合が、そこでやるのはイベントの設定だと思います。

今回の質問のコードにも、ふたつ　window.addEventListener('DOMContentLoaded',　がありますが、
両方とも、その中では、イベントを設定しています。
inputFile[i].addEventListener
button[i].addEventListener

そもそも　DOMContentLoaded　は一回しか発生しないので、別々に書いてもあまり意味がありません。
DOMContentLoaded　が発生した時に、この処理をしてね、と言う設定が　addEventListener　です。
無理に日本語にしてみると　追加　イベント　聞く者　で、イベントを聞く者を追加すると言う意味です。
仕組みはわかりませんが、イベントを設定すると、どこかでずっとそのイベントが発生するのを待って聞き耳を立てている者がいるわけです。

・どのような条件の時に[i]をつけるのか

これは配列の何番目を示す方法です。
<input type="file">が複数あるからinputFileに[i]を付けて何番目かを示しています。
<button type="button" class="attachclear">clear</button>が複数あるなら、
buttonに[i]を付けて何番目かを示す必要があります。

inputFile[i]やbutton[i]だけを見てそう言うものがあるのかと思っているかも知れませんが、
これは、inputFile[0]、inputFile[1]、inputFile[2]、inputFile[3]と言う配列の実体があると思ってください。
こう言うものはループで処理します。
for (let i = 0; i < changeImg.length; i++) {}
どのようなループかと言うと。
iは0から始まり、iがchangeImg.lengthより小さい間繰り返し、iは1ずつ増えていく、と言うものです。

inputFile[i]と書かれていたら、最初はinputFile[0]についての処理で、
繰り返しで、iが1増えて、inputFile[1]の処理、と言う風に２回処理されています。
決して、inputFile[i]と言うものに処理しているわけではありません。

試しにこのコードを実行してみてください。
－－－－
<input type="file" class="inputFile">
<input type="file" class="inputFile">
<script>
const inputFile = document.querySelectorAll('.inputFile');
console.log(inputFile);
</script>
－－－－
Chromeの開発者モードでコンソールをみると　inputFile　の中身が見れます。
0: input.inputfile
1: input.inputfile

左の数字は配列のインデックス（番目）です。
これらを順番に処理していると言うことです。

横向きの三角形をクリックするとさまざまなプロパティが表示されます。
JavaScriptはこのようにして現在の状態を調べることができるので便利です。

補足

Q.constは変数を定義しているだけで、イベントとは直接関係ありません。

イベントを設定しているのはここです。
inputFile[i].addEventListener
つまり、イベントが設定されているのは　inputFile[i]　です。
changeImg[i]とviewFile[i]にはイベントはありません。

A.説明ありがとうございます。イベントはinputFile[i].addEventListenerのみなんですね。

Q.そもそも　DOMContentLoaded　は一回しか発生しないので、別々に書いてもあまり意味がありません。
DOMContentLoaded　が発生した時に、この処理をしてね、と言う設定が　addEventListener　です。
無理に日本語にしてみると　追加　イベント　聞く者　で、イベントを聞く者を追加すると言う意味です。
仕組みはわかりませんが、イベントを設定すると、どこかでずっとそのイベントが発生するのを待って聞き耳を立てている者がいるわけです。

A.説明ありがとうございます、イベントを1つにまとめたい場合のコードを調べてみたのですが、どうしても分かりませんでした…
今回の2つのイベントをまとめることは可能なのでしょうか？
カメラ画像(inputFile[i].addEventListener)ボタン(button[i].addEventListener)

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

Q.inputFile[i]と書かれていたら、最初はinputFile[0]についての処理で、
繰り返しで、iが1増えて、inputFile[1]の処理、と言う風に２回処理されています。
決して、inputFile[i]と言うものに処理しているわけではありません。

A.説明ありがとうございます、理解が浅い部分があるのですが、.addEventListenerに付属している
inputFile[i].addEventListenerとbutton[i].addEventListenerに[i]を付けて何番目かを示しているということは分かりました。

changeImgとviewFileにも[i]をつけているのは上記と同様にファイルアップロード機能が複数あるからでしょうか？

回答No.22

dell_OK

・もしかすると意図を理解出来ていないのかもしれないです。

そうですね。
「サーバーサイド」と言うのがＰＨＰのことになります。
ＰＨＰはサーバーで実行されるもので、
JavaScriptはローカルで実行されるものです。

補足

回答ありがとうございます、ＰＨＰサーバー側とJavaScriptローカル側の両方でファイルタイプ（拡張子）のチェックをした方がよいということですね。

回答No.21

dell_OK

・.addEventListenerにも(changeImg[i])入力されたら消す画像のイベント設定は必要なのでしょうか？

質問を理解できません。
addEventListener()を勘違いされていないですか。

クリアボタンがひとつになっていますが、それであっていますか。
ひとつかファイルごとかによって、作りが変わってきます。

補足

Q.addEventListener()を勘違いされていないですか。

クリアボタンがひとつになっていますが、それであっていますか。
ひとつかファイルごとかによって、作りが変わってきます。

A.回答ありがとうございます、カメラ画像のイベントのコードはconst 〇〇 に該当するinputFile[i]とchangeImg[i]とviewFile[i]にイベント設定をされているのかと考えました。
リセットボタンのイベントはconst resetButtonsのみなのでchangeImgに[i]をつけるのは不自然ではないかと考えたのですが、どのような条件の時に[i]をつけるのか教えて頂きたいです。

クリアボタンは2つ設置するのを忘れておりました申し訳ありません。

//カメラ画像のイベント
window.addEventListener('DOMContentLoaded', function() {
const inputFile = document.querySelectorAll('.inputFile'); // 入力される画像
const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像
const viewFile = document.querySelectorAll('.viewFile'); // 入力されたら表示する画像
const fileHeight = "100px" // 置き換えた後のファイルの高さ

//リセットボタンのイベント
window.addEventListener('DOMContentLoaded',
function() {
const resetButtons = document.querySelectorAll('.attachclear'); //押されたらファイルをリセットする

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

回答No.20

dell_OK

・今回のコードはMIME typeで分岐しており、該当しないファイルはキャンセルしているので問題ないと思うのですが、拡張子のチェックは問題ないでしょうか…？

私からははっきりしたことは言えません。
JavaScriptで取得するMIMEタイプは拡張子にも影響されているようです。
なので拡張子をチェックする必要はないような気がします。

以下のコードを試してみてください。
－－－－
<form>
<input type="file" id="file" onchange="check_mime();">
</form>
<script>
function check_mime() {
const file = document.getElementById("file");
alert(file.files[0].type);
}
</script>
－－－－
メモ帳などでテキストファイル「test.txt」を作ります。
内容は空でかまいません、ゼロバイトのファイルです。
このファイルを選択すると「text/plain」が表示されます。
拡張子を変えて「test.jpeg」にします。
このファイルを選択すると「image/jpeg」が表示されます。
ファイルの内容ではなく、まるで拡張子でMIMEタイプを決めているような動作です。

それに、以前作ったＰＨＰ側でのファイルチェックがあるので、JavaScriptでの判定は難しく考えなくてもいいような気がします。
セキュリティについて指摘を頂いた「アップロードされたファイルの拡張子や内容を厳密に検証」と言うのも、ＰＨＰ側での話しだと思います。
なぜなら「アップロードされた」と言うのはＰＨＰでしか処理できません。
JavaScriptで直接処理できるのはアップロード前のファイルです。

補足

Q.JavaScriptで取得するMIMEタイプは拡張子にも影響されているようです。
なので拡張子をチェックする必要はないような気がします。

ファイルの内容ではなく、まるで拡張子でMIMEタイプを決めているような動作です。

A.回答ありがとうございます、試してみたところimage/jpegと表示されました。確かに拡張子で判断しているようですね。

Q.それに、以前作ったＰＨＰ側でのファイルチェックがあるので、JavaScriptでの判定は難しく考えなくてもいいような気がします。
セキュリティについて指摘を頂いた「アップロードされたファイルの拡張子や内容を厳密に検証」と言うのも、ＰＨＰ側での話しだと思います。
なぜなら「アップロードされた」と言うのはＰＨＰでしか処理できません。
JavaScriptで直接処理できるのはアップロード前のファイルです。

A.アドバイスありがとうございます、PHP側でというのも考えたのですが下記のように別途チェックするようにご指摘頂いたので、もしかすると意図を理解出来ていないのかもしれないです。

※アドバイス頂いた文言
アップロードされたファイルの拡張子を正規化し、意図しないファイルタイプのマイムタイプを避けるために、サーバーサイドで適切なファイルタイプのチェックを行ってください。

回答No.19

dell_OK

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

問題ありませんが、ひとつにしても問題ありません。
その前に、コメントがじゃまして、改行がおかしくなっています。

補足

回答ありがとうございます、確認不足で申し訳ありません。
今回は処理を分かりやすくするためにまとめずに書いておこうと考えております。

セキュリティについて指摘を頂いたのですが、ファイルアップロードの際に、アップロードされたファイルの拡張子や内容を厳密に検証し、信頼できるファイル形式のみを許可して、実行可能なファイルや危険なファイルを拒否したほうがよいとアドバイス頂きました。

今回のコードはMIME typeで分岐しており、該当しないファイルはキャンセルしているので問題ないと思うのですが、拡張子のチェックは問題ないでしょうか…？

不安な部分があるのですが、.addEventListenerにも(changeImg[i])入力されたら消す画像のイベント設定は必要なのでしょうか？
[i]が必要なのか確証がなくボタンのイベントになるため、入力されたら消す画像とは直接関係ないのではと考えております。

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