WordPressの質問（q10226736）の続

質問

➀
－－－－
divTitlePartialParts.classList.add("title-partial"); // classの追加
divTitlePartialParts.classList.add("parts"); // classの追加
－－－－

➁
－－－－
divTitlePartialParts.classList.add("title-partial", "parts"); // classの追加
－－－－

➂
－－－－
divTitlePartialParts.className = "title-partial parts"; // classの追加
－－－－
divTitlePartialParts.setAttribute("class", "title-partial parts"); // classの追加
－－－－

下記のHTML クラスで CSS を書きたいのですが、
➀➁のクラスを2つ分ける方法と➂のまとめて書く方法どちらを選択すべきでしょうか？
頻繁に書き換える場合 classList を使ったほうが良いとのことでどちらが良いか悩んでおります。

・title-partial {

}

回答No.20

dell_OK · ベストアンサー

・➀行目はどのようなコードになるのでしょうか？

質問の意味がわかりません。
コメントに書かれている通りのことです。

他のところにもあります。
200行目　for (let i = 0; i < parts.length; i++) {
229行目　for (let i = 0; i < attach.length; i++) {

・➈blobUrl[i]というコードはバイナリファイルをURLにする目的で書かれたものでしょうか？
DataURL と BlobURL があるようで何故 BlobURL になったのか知りたいです。

私は覚えていません。
質問者さまが決められたのではなかったですか。

「※DataURIとBlobURLの違い」を見て思いましたが、
Base64を使いたくないとか言われていなかったでしょうか。

そもそもアップロードファイルと同じものです。
411行目　changeImg.src = blobUrl[i];

お礼

こちらが最新の質問になります。
回答が遅れてしまい申し訳ありません、dell_okさんに事前に伝えておくべきでした。

回答の期限が切れてしまった為下記のリンクからアドバイスお願い致します。

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

補足

回答ありがとうございます。遅れてしまい申し訳ありません。
Base64を使わずにバイナリーデータを調べる方法をとっていたのを忘れておりました。
結果画面まで作成致します。

回答No.19

dell_OK

最新コードを添削してみました。
https://wandbox.org/permlink/9p72McizK12P3f8q
コード比較してみて変更点を確認してみてください。
わからないところは聞いてください。

補足

訂正ありがとうございます。ファイルアップロードと画像アイコンについての処理をまとめられているのは理解できました。
386行目から397行目からの新コードについて調べながらコメントアウトで意味を書いてみました。

➀for (let i = 0; i < blobType.length; i++) { //変数 i = 0,変数 i < MIME タイプ配列.配列の要素の数;変数「i」に値を１追加する
➁ if (i == 3) { //もし変数 i と 3が同じ値なら
➂ usericonImg = document.createElement("img"); //imgタグを生成
➃ usericonImg.style.maxHeight = "40px"; //要素の最大高を設定
➄ usericonImg.style.maxWidth = "40px"; //要素の最大幅を設定
➅ if (blobType[i] == "") { //もし MIME タイプ配列が空だったら
➆ usericonImg.src = "<?php echo $noimage_url; ?>"; //代替え画像を表示する
➇ } else { //アイコン画像がアップロードされていたら
➈ usericonImg.src = blobUrl[i]; //データをURLで表現するための仕組み　変数「i」
➉ }
} else {
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

ここから分からない点を書きました。アドバイスお願い致します。
➀行目はどのようなコードになるのでしょうか？
➁行目は回答No.15で dell_ok さんに頂いた解説とサンプルコード218、219行目から分かりました。

※回答No.15から抜粋
attach[0] アップロードファイル1
attach[1] アップロードファイル2
attach[2] アップロードファイル3
attach[3] 画像アイコン

※218、219行目から抜粋
const blobType = ["", "", "", ""];
const blobUrl = ["", "", "", ""];

➈blobUrl[i]というコードはバイナリファイルをURLにする目的で書かれたものでしょうか？
DataURL と BlobURL があるようで何故 BlobURL になったのか知りたいです。

※DataURIとBlobURLの違い
https://qiita.com/you8/items/2dd56fad8ead82bfe73d

➀変数i が 0（画像アイコン？）個より少ない場合、バイナリー判定した要素の値に 1 追加する
➁ i == 3 画像アイコンなら
➂ img タグを生成
➃画像の縦幅を 40px で設定
➄画像の横幅を 40px で設定
➅バイナリー判定した要素（アイコン画像）が空だったら
➆代替え画像を表示する
➇アイコン画像がアップロードされていたら
➈アップロードされた画像を表示する

※説明が難しいため各行に番号を振っております。

回答No.18

dell_OK

・回答者のデザインのみ順番を変更することは可能でしょうか？

回答者のデザインとはなんなのかわかりません。
質問一覧画面ではどのような配置でもかまわないと思います。

お礼

もしアイコン画像がアップされていなければダミー画像を表示、アップされていればそのまま確認画面で表示するという前提でコードを考えてみました。
入力画面で input要素 のファイルの有無を判定して、それぞれ出力したい画像のコードを書くことで確認画面（非同期通信）を行う前に変数としてまとめることが出来て、確認画面でのコードは複雑なものにならないのではないかと思いました。
2つ考えてみたのですが、どちらも知識が浅くコードに間違いがありそうです…

こちらの機能とは別にアイコン画像をアップロード時にアバター画像を非表示にする機能も働いておらず、どうすべきか悩んでおります。
アイコン画像のアップロード項目を任意で追加する場合、回答画面で表示できれば良いと想像しているのですが、dell_ok さんならどのような方法で実装しますでしょうか？
コードがあまりにも複雑化してしまうのであればアイコン画像の項目の追加は辞める予定です。

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

※該当ページ
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※考えたコード1
<input type="file" class="attachImg" accept=".png, .jpg, .jpeg" onchange="setImage(this);" onclick="this.value = '';">

<img src="<?php echo $noimage_url; ?>" class="usericonImg" style="height: 100px;">
<script>
function setImage(target) {
var reader = new FileReader(); //インスタンスを生成
reader.onload = function(e) {
document.querySelectorAll("usericonImg").setAttribute('src', e.target.result);
}
reader.readAsDataURL(target.files[0]); //指定したBlob型かFIle型のファイルを読み込む
};

fileReader.onload = (function(e) {
if ("usericonImg" === null) { //もしアバター画像を選択されていないなら
document.write('<img src="image/foge.jpg">'); //ダミー画像を出力
} else { //アップロードの画像を選択されているなら
document.querySelectorAll('usericonImg').innerHTML += '<img src="' + e.target.result + '">'; //アップロードされたアイコン画像を設定する
}
});
</script>

※考えたコード２
<script>
const binary = document.querySelectorAll('attachImg'); //クラス名を変えないとファイルアップロードの方にも影響が出るのではないか

binary.addEventListener("change", function(evt) {
var imagefile = evt.target.files; //選択ファイルを配列形式で取得

if ("changeImg" === null) { //もしアイコン画像が空なら
document.write('<img src="image/foge.jpg">'); //ダミー画像を出力
} else { //アイコン画像がアップロードされているなら
document.write(changeImg); //変数 changeImg（アップロード画像アイコン）を表示
}
})
</script>

※input type="file"　の選択判定
https://teratail.com/questions/346307

※FileReaderを使って画像をプレビュー
https://okinawanpizza.hatenablog.com/entry/2020/12/29/120807#google_vignette

※JavaScriptで画像を表示する方法
https://qiita.com/minamikawa1990/items/729e50b6c6c5089721eb

補足

回答ありがとうございます、回答者が見る画面になります。

回答No.17

dell_OK

・アップロードボタンをダミー画像にするという意味が良く理解できていないのですが、現在のコードとはまた別の方法があるのでしょうか？

別のコードはありません。

質問された選択肢はこうでした。
　➀確認画面でダミー画像を表示して質問者がアイコン画像を付けるかどうか気持ちを確かめる
　➁結果画面までダミー画像を表示させず質問一覧画面で初めて表示する
これでは質問画面にはダミー画像が表示されてないように思いますし、あの時点での画面は見ていませんのでどうなっていたか知りませんでした。

なので、質問画面の時からダミー画像を表示しておけばいいと言ったまでです。

補足

回答ありがとうございます、質問画面と確認画面ではダミー画像を表示して、質問一覧ページでアイコン画像を表示させるということですね。
確認画面でif分岐させて画像がアップロードされた場合はそちらを表示、されていない場合はダミー画像を表示させるようにしたいと考えております。
コードが複雑化してしまう場合は質問→確認では表示せずに回答者が見るページで表示させるのがベストではないかと思いました。

回答No.16

dell_OK

・入力ページは現在の並びで確認ページは上記のようにしたいのですが、不可能でしょうか？

不可能ではありませんが、
投稿者が戸惑うと思うのでおすすめしません。
質問、確認、結果は、すべて同じ並びや配置にすべきだと思います。
順序が入れ替わるページは見たことがありませんし、
メリットもないと思います。

コードの簡略化のためにここまでしてきましたが、
もし順序を入れ替えるのであれば、
画像アイコンは別の名前にした方がいいような気がします。
　<input type="file" class="avatar" name="avatar">

同じ名前のままループ処理でまわすと、
配列のインデックスを気にしなくてはならないので、
わかりにくいコードになるかも知れません。

とは言え、名前を変えるとコード量が２倍になるかも知れません。

そこまでしなくてもいい方法があるかも知れませんが、
よく考える必要がありそうです。

お礼

順番を画像・動画アップロード→メッセージ→タイトル→スタンプ→画像アイコンアップロード→名前に修正いたしました。

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

補足

Q.投稿者が戸惑うと思うのでおすすめしません。
質問、確認、結果は、すべて同じ並びや配置にすべきだと思います。
順序が入れ替わるページは見たことがありませんし、
メリットもないと思います。

A.アドバイスありがとうございます。goo質問のデザインを参考に考えたのですが、順序は入れ替えないほうが投稿者には分かりやすそうですね。
画像→メッセージ→タイトル→スタンプ→画像アイコン→名前の順番で質問、確認、結果は統一して、回答者のデザインのみ順番を変更することは可能でしょうか？
________________________________________

回答No.14の質問画面のアップロードボタンをダミー画像にするという意味が良く理解できていないのですが、現在のコードとはまた別の方法があるのでしょうか？
アイコン画像アップロード時にダミー画像を消して表示する機能は維持したまま、確認画面でアップロードされていない場合はダミー画像、アップロードされた場合はその画像を表示させるような機能にしたいと考えております…

回答No.15

dell_OK

配置はこうではないのですか。
～～～～
Q　質問する　　　　　　　　　STEP1入力＞STEP2確認＞STEP3完了
タイトル　　　　　　　　　　　　　　　　　　　　　スタンプ画像
画像アイコン　名前
メッセージ
アップロードファイル1　　アップロードファイル2　　アップロードファイル3
修正するボタン　　　　　　　投稿するボタン
～～～～

現在の画面を見てみましたが、アップロードファイルが先にあると、順番が変わります。
＝＝＝＝
アップロードファイル1<input type="file" class="attach">
アップロードファイル2<input type="file" class="attach">
アップロードファイル3<input type="file" class="attach">
画像アイコン<input type="file" class="attach">
＝＝＝＝

変数attachの中は、上から順に要素が取得されています。
attach[0] アップロードファイル1
attach[1] アップロードファイル2
attach[2] アップロードファイル3
attach[3] 画像アイコン

つまり　i==0　の判定は　i==3　になってきます。

補足

Q.配置はこうではないのですか。
～～～～
Q　質問する　　　　　　　　　STEP1入力＞STEP2確認＞STEP3完了
タイトル　　　　　　　　　　　　　　　　　　　　　スタンプ画像
画像アイコン　名前
メッセージ
アップロードファイル1　　アップロードファイル2　　アップロードファイル3
修正するボタン　　　　　　　投稿するボタン
～～～～

A.解説ありがとうございます。
入力ページは現在の並びで確認ページは上記のようにしたいのですが、不可能でしょうか？

回答No.14

dell_OK

・= の先が何故 height と width になるのか分からないのですが、どこからきているのでしょうか？

ここですよ。
－－－－
if(i == 0){
maxsize = 5;
height = "40px";
width = "40px";
}else{
maxsize = 15;
height = "350px";
width = "528px";
}
－－－－

・どちらを選択しますでしょうか？

質問画面のアップロードボタンをダミー画像にしておけばいいと思います。
ＯＫＷＡＶＥのプロフィール画像はこんな感じになっています。
アバターっぽい画像とアップロードのようなアイコン。

補足

Q.= の先が何故 height と width になるのか分からないのですが、どこからきているのでしょうか？

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

・どちらを選択しますでしょうか？

Q.質問画面のアップロードボタンをダミー画像にしておけばいいと思います。
ＯＫＷＡＶＥのプロフィール画像はこんな感じになっています。
アバターっぽい画像とアップロードのようなアイコン。

A.アドバイスありがとうございます、その発想はありませんでした。
ＯＫＷＡＶＥのプロフィール画像のように使う場合、確認画面でもアイコン画像を表示させることになると思うのですが、画像がアップロードされた場合とされずにアバターっぽい画像を設定するコードはどのように書くのでしょうか？
アバター画像をアップロードしたい方もおられると思い、もしアップロードされなかったらダミー画像を表示させるという仕組みで考えていたのですが、画像を元々設置している為か機能せずどのように書けば良いか分からない状態です…アドバイスお願い致します。
sample.phpの224行目で要素を取得、227行目に画像がない場合にダミー画像を追加するコードを書いております。

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

※該当ページ
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※参考サイト
https://mebee.info/2020/11/19/post-17828/

回答No.13

dell_OK

・イコールの先が分かりません… 下記コードの i を j に変更して使いまわすような形になるのでしょうか？

これでもかまわないのですが、条件分岐の処理は何か所にも書かない方がいいです。
条件が変わるたびに直す必要が出てくるからです。
－－－－
if (j == 0) {
child.style.height = "40px";
child.style.width = "40px";
} else {
child.style.height = "350px";
child.style.width = "528px";
}
－－－－

なので、maxsizeと同じところでやっておきます。
－－－－
if(i == 0){
maxsize = 5;
height = "40px";
width = "40px";
}else{
maxsize = 15;
height = "350px";
width = "528px";
}

省略

child.style.height = height;
child.style.width = width;
－－－－

・アイコン画像がアップロードされていない場合ダミー画像を表示させるものになります。

これは質問画面には関係ないものです。
確認画面、結果画面、出すのであれば質問一覧画面、で処理することです。
なので、処理するタイミングが違いますので、それぞれの場所で必要な処理を入れてください。

補足

Q.これでもかまわないのですが、条件分岐の処理は何か所にも書かない方がいいです。
条件が変わるたびに直す必要が出てくるからです。
－－－－
child.style.height = height;
child.style.width = width;
－－－－

A.アドバイスありがとうございます。画像に関することなのでまとめられるということですね。
= の先が何故 height と width になるのか分からないのですが、どこからきているのでしょうか？

Q.これは質問画面には関係ないものです。
確認画面、結果画面、出すのであれば質問一覧画面、で処理することです。
なので、処理するタイミングが違いますので、それぞれの場所で必要な処理を入れてください。

A.解説ありがとうございます。表示タイミングを2パターンで悩んでおります。
結果画面でダミー画像を表示させた場合確認画面に戻ることは出来ない為、質問者にとって良いものではないと思いました。
dell_ok さんならどちらを選択しますでしょうか？

➀確認画面でダミー画像を表示して質問者がアイコン画像を付けるかどうか気持ちを確かめる
➁結果画面までダミー画像を表示させず質問一覧画面で初めて表示する

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

回答No.12

dell_OK

・iで判別するということはクラス名は統一するということでしょうか？

そうですね。
言った通り、処理に必要なクラスは同じにしておいてください。

・アイコン画像の表示サイズを40×40で想定している場合 CSS で縮小する方法になるのでしょうか？

そうですね。
表示サイズはここで指定しているようなので、ここも変数にしてみてください。
－－－－
child.style.height = "350px";
child.style.width = "528px";
－－－－

・i == 0 はファイルアップロードにも使われているようなので、画像ファイルかファイルアップロードかどうやって判定しているのか分からずお聞きしたいです。

配置の順はこうですよね。
～～～～
Q　質問する　　　　　　　　　STEP1入力＞STEP2確認＞STEP3完了
タイトル　　　　　　　　　　　　　　　　　　　　　スタンプ画像
画像アイコン　名前
メッセージ
アップロードファイル1　　アップロードファイル2　　アップロードファイル3
修正するボタン　　　　　　　投稿するボタン
～～～～

そうすると、ＨＴＭＬはこうなります。
見にくいのでここではアップロードファイルを改行しておきます。
＝＝＝＝
画像アイコン<input type="file" class="attach">
アップロードファイル1<input type="file" class="attach">
アップロードファイル2<input type="file" class="attach">
アップロードファイル3<input type="file" class="attach">
＝＝＝＝

それで、クラスで取得する処理はこれ、
－－－－
const attach = document.querySelectorAll('.attach');
－－－－

変数attachの中は、上から順に要素が取得されています。
attach[0] 画像アイコン
attach[1] アップロードファイル1
attach[2] アップロードファイル2
attach[3] アップロードファイル3

なので、
iが0の時はアイコン画像の処理になり、
iが1以降の時はアップロードファイルの処理になります。

補足

Q.そうですね。
表示サイズはここで指定しているようなので、ここも変数にしてみてください。
－－－－
child.style.height = "350px";
child.style.width = "528px";
－－－－

A.アドバイスありがとうございます。変数宣言は let 変数名 = 初期値; だと思うのですが、
イコールの先が分かりません… 下記コードの i を j に変更して使いまわすような形になるのでしょうか？
for文では i の次に j が使われているとのことで j にしております。

for (let j = 0; j < attach.length; j++) {
attach[j].addEventListener('change', () => {
//HTML要素の中身を変更するときに使われるプロパティ
if (j == 0) {
child.style.height = "40px";
child.style.width = "40px";
} else {
child.style.height = "350px";
child.style.width = "528px";
}
});
};

※参考サイト
https://jsprimer.net/basic/variables/

Q.変数attachの中は、上から順に要素が取得されています。
attach[0] 画像アイコン
attach[1] アップロードファイル1
attach[2] アップロードファイル2
attach[3] アップロードファイル3

なので、
iが0の時はアイコン画像の処理になり、
iが1以降の時はアップロードファイルの処理になります。

A.分かりやすい解説ありがとうございます、HTML に直して考えるのは良いですね。
attach[] で判定しているのが理解できました。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

1つ追加したい項目を忘れておりました。アイコン画像がアップロードされていない場合ダミー画像を表示させるものになります。
//画像がない場合にダミー画像表示で追加を考えていたのですが、//アイコン画像とアップロードファイルの分岐処理に加えても良いでしょうか？
HTML でも代替画像を表示することが出来るようでどの方法が良いか悩んでおります。

//画像がない場合にダミー画像表示
changeImg.onerror = () => {
changeImg.src = 'changeImg.png';
changeImg.removeAttribute('onerror')
}

//アイコン画像とアップロードファイルの分岐処理
　　　　 for (let i = 0; i < attach.length; i++) {
attach[i].addEventListener('change', () => {
//HTML要素の中身を変更するときに使われるプロパティ
if (i == 0) {
maxsize = 5;
} else {
maxsize = 15;
}
});
};

※Javascript 画像がない場合に代替え画像表示
https://mebee.info/2020/11/19/post-17828/

※HTML 画像ファイルが見つからない場合に代替画像を表示
https://wdeco.jp/_/view/8

回答No.11

dell_OK

まずJavaScriptのコードはそのままで、
アイコン画像を追加した画面で動作確認されましたか。
画面の配置が変わったので、
１つ目のファイルがアイコン画像、
２つ目以降のファイルがアップロードファイルになります。
処理に必要なクラスは変更しないでください。

for (let i = 0; i < attach.length; i++) {}
この処理はiが0から3の４回繰り返されます。
iが0の時はアイコン画像の処理になり、
iが1以降の時はアップロードファイルの処理になります。
つまり、実行時点の処理が、
アイコン画像なのかアップロードファイルなのかは、
iの値を判定することでわかります。

アイコン画像とアップロードファイルで違う処理をしたい場合はこう書きます。
－－－－
if(i == 0){
　アイコン画像の処理（Ａ）
}else{
　アップロードファイルの処理（Ｂ）
}
－－－－

ですが、（Ａ）と（Ｂ）の処理のほとんどは同じなのでそのまま使えます。

使えないのはここだけです。
「➀カメラ画像ではなく別の画像を用意する、可能であれば画像サイズは5MBで制限したい」

こちらは、
「➁アイコンは画像のみアップロードを許可」
アイコン画像の属性acceptで完結しているのでいいと思います。

では、画像サイズの処理だけ変更すればいいことがわかりました。
（Ａ）と（Ｂ）に5MBか15MBかの数値が違うだけのほとんど同じ膨大なコードを書く必要はありません。

どうにかしたいのはここだけです。
この15を固定で書いているので問題になっています。
－－－－
if (attach[i].files[0].size > 15 * 1024 * 1024) {
alert('ファイルサイズが 15MBバイトを超えています');
return;
}
－－－－

なのでここを変数にします。
－－－－
if(i == 0){
maxsize = 5;
}else{
maxsize = 15;
}
if (attach[i].files[0].size > maxsize * 1024 * 1024) {
alert('ファイルサイズが ' + maxsize + 'MBバイトを超えています');
return;
}
－－－－

これで（Ａ）（Ｂ）は膨大なコードにならずにすんで、
それ以降の処理はそのまま使えるようになります。

ただ、画面の配置をまた変えたりして、順番が変わると手直しが必要になってきます。
なので、名前などの文字数で使っているdata属性を使うのもいいかも知れません。
－－－－
<input type="file" class="attach" name="attach[]" data-maxsize="5" accept=".png, .jpg, .jpeg" style="display: none;">
－－－－

するとifは不要になり、これだけでよくなります。
－－－－
if (attach[i].files[0].size > attach[i].dataset.maxsize * 1024 * 1024) {
alert('ファイルサイズが ' + attach[i].dataset.maxsize + 'MBバイトを超えています');
return;
}
－－－－

試していませんが、だいたいこんな感じでいいと思います。

お礼

※表示ページ
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※最新コード(sample.php)
https://wandbox.org/permlink/xNOHoX80XXujWYME

補足

Q.まずJavaScriptのコードはそのままで、
アイコン画像を追加した画面で動作確認されましたか。
for (let i = 0; i < attach.length; i++) {}
iが0の時はアイコン画像の処理になり、
iが1以降の時はアップロードファイルの処理になります。
アイコン画像なのかアップロードファイルなのかは、
iの値を判定することでわかります。

A.訂正ありがとうございます。動作確認はしておりませんでした申し訳ありません。
0の時にアイコン画像の処理にするという考えは浮かびませんでした勉強になります。

Q.アイコン画像とアップロードファイルで違う処理をしたい場合はこう書きます。
－－－－
if(i == 0){
　アイコン画像の処理（Ａ）
}else{
　アップロードファイルの処理（Ｂ）
}
－－－－

A.回答ありがとうございます。通常はクラス名を Document: querySelectorAll() で取得してからそれぞれのコードを書くと思うのですが、iで判別するということはクラス名は統一するということでしょうか？

Q.使えないのはここだけです。
「➀カメラ画像ではなく別の画像を用意する、可能であれば画像サイズは5MBで制限したい」

こちらは、
「➁アイコンは画像のみアップロードを許可」
アイコン画像の属性acceptで完結しているのでいいと思います。

では、画像サイズの処理だけ変更すればいいことがわかりました。

A.回答ありがとうございます。画像のアップロードのみ許可は HTML で制御できるんですね。
1つだけ気になることがあるのですが、アイコン画像の表示サイズを40×40で想定している場合 CSS で縮小する方法になるのでしょうか？

Q.なのでここを変数にします。
－－－－
if(i == 0){
maxsize = 5;
}else{
maxsize = 15;
}
if (attach[i].files[0].size > maxsize * 1024 * 1024) {
alert('ファイルサイズが ' + maxsize + 'MBバイトを超えています');
return;
}
－－－－

A.修正ありがとうございます。頂いたコードを見ると i == 0 はファイルアップロードにも使われているようなので、画像ファイルかファイルアップロードかどうやって判定しているのか分からずお聞きしたいです。

回答No.10

dell_OK

・ファイルのアップロードと処理を分けるべきか悩んでおります。

分けなくてやってみて問題なければそれでいいと思います。

補足

回答ありがとうございます。
任意で画像アイコンをアップロードする機能(アップロードされていない場合はダミー画像を表示)を下記の条件で考えてみたのですが、
for (let i = 0; i < attach.length; i++) {} が clear ボタンまで囲っているためまとめ方が分からず dell_ok さんにアドバイス頂きたいです。
if else 文でファイルアップロードと画像アイコンアップロードの分岐を考えてみたのですが、上記の理由からコードを分断する形をとっております。
同じ処理を何度も行うのであればその部分を抜き出して、関数として独立させる方法もあるとアドバイス頂いたのですが、今回の場合難しいのではないかと思っております。

※参考サイト
https://qiita.com/matsuby/items/1010ae38ee6258fd8020

➀カメラ画像ではなく別の画像を用意する、可能であれば画像サイズは5MBで制限したい
➁アイコンは画像のみアップロードを許可
➂clear ボタンのデザインはそのまま使う

※test.phpに考えたコードを書いております。
https://wandbox.org/permlink/oovm46QxskLQNXFU

※クラス名で条件分岐（入力されたら消す画像の分岐）
https://www.imamura.biz/blog/27372

※画像が存在しない場合ダミー画像を表示する
https://mebee.info/2020/11/19/post-17828/