掲示板を非同期通信で入力→確認→表示で作成しております。
確認画面を下記のように作成しているのですが、新たに任意で画像アイコンをアップロードする機能を加えたいと考えております。(アップロードされていない場合はダミー画像を表示)
画像アイコンの条件を3つほど想定していて、ファイルアップロードに関するコードと被る部分も出てくる為、どこまでまとめるべきか悩んでおります。
カメラ画像と別の画像を用意する場合の書き方についてのアドバイスもお願い致します。
➀カメラ画像ではなく別の画像を用意する、可能であれば画像サイズは5MBで制限したい
➁アイコンは画像のみアップロードを許可
➂clear ボタンのデザインはそのまま使う
※確認画面イメージ
Q質問する STEP1入力>STEP2確認>STEP3完了
タイトル スタンプ画像
画像アイコン 名前
メッセージ
アップロードファイル1 アップロードファイル2 アップロードファイル3
修正するボタン 投稿するボタン
※ファイルアップロードに関するコード
<div class="image-partial">
<h2>動画・画像アップロード<span class="required">※ファイルサイズ15MB以内</span></h2>
<div class="image-selector-button">
<label>
<div class="image-camera-icon">
<img src="<?php echo $camera_url; ?>" class="changeImg">
</div>
<input type="file" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .pdf, .mp4" style="display: none;">
</label>
<div class="viewer"></div>
<button type="button" class="attachclear">clear</button>
</div>
</div>
<script>
const set_attach_event = function() {
const attach = document.querySelectorAll('.attach');
const clear = document.querySelectorAll('.attachclear');
const viewer = document.querySelectorAll('.viewer');
const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像
for (let i = 0; i < attach.length; i++) {
attach[i].addEventListener('change', () => {
if (attach[i].files[0].size > 15 * 1024 * 1024) {
alert('15MBバイト超えています');
return;
}
viewer[i].innerHTML = "";
blobType[i] = "";
blobUrl[i] = "";
if (attach[i].files.length !== 0) {
//オブジェクトのURL作成
blobUrl[i] = window.URL.createObjectURL(attach[i].files[0]);
//FileReaderオブジェクト 生成し、ファイルの内容を非同期で取得
const reader = new FileReader();
reader.onload = () => {
var child = null;
//result プロパティは、ファイルの内容
if (reader.result.indexOf("data:image/jpeg;base64,") === 0 ||
reader.result.indexOf("data:image/png;base64,") === 0) {
blobType[i] = "img";
child = document.createElement("img");
} else if (reader.result.indexOf("data:video/mp4;base64,") === 0) {
blobType[i] = "video";
child = document.createElement("video");
child.setAttribute("controls", null);
} else if (reader.result.indexOf("data:application/pdf;base64,") === 0) {
blobType[i] = "iframe";
child = document.createElement("iframe");
} else {
alert("対象外ファイル");
attach[i].value = "";
}
if (child !== null) {
child.src = blobUrl[i];
//戻り値は追加した子要素 viewer
viewer[i].appendChild(child);
changeImg[i].classList.add('hideItems'); // 元々の画像を消す
}
};
//Blob 又は File の内容を読み込む
reader.readAsDataURL(attach[i].files[0]);
}
});
clear[i].addEventListener('click', () => {
blobType[i] = "";
blobUrl[i] = "";
attach[i].value = "";
viewer[i].innerHTML = "";
changeImg[i].classList.remove('hideItems');
});
};
}
</script>
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
どのプログラミング言語にも言えますが、同じ処理を何度も行うのであれば、その部分を抜き出して、関数として独立させましょう。
https://qiita.com/matsuby/items/1010ae38ee6258fd …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript JavascriptでDOM-based XSSの発生源となるinnerHTMLを変更したい 2 2023/08/29 22:11
- JavaScript 変数名をどのようにつけるのが良いかアドバイスお願い致します 4 2024/02/28 19:44
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- JavaScript disabled プロパティが表示されない原因が分からない 2 2024/02/10 21:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
jQuery bxSlider 画像に変更
-
クリッカブルマップの一部分だ...
-
画像をクリックして別の画像を...
-
javaを使ってマウスオンでの画...
-
ランダム表示に加えwidthをブラ...
-
画像にロールオーバーするとメ...
-
プルダウンの位置がwin/macでず...
-
Javascript で共通の処理をどこ...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
自働生成される<div>タグに連番...
-
javascriptでフォーカスを当て...
-
指定したパスが現URLに含まれて...
-
removeAttribute()メソッドで削...
-
CSS <div>の入れ子が反映さ...
-
外部javascriptの重複を防ぐには
-
クリックすると下に説明文が出...
-
YouTubeをブログに貼る時、1つ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
画像の重なりの順序を代える方...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
透過pngの透明部分以外をクリッ...
-
1枚の画像をクリックして複数の...
-
ステータスバーについて
-
JavaScript スライドの画像にリ...
-
マウス追従スクリプトについて
-
画面の表示位置を指定させて表...
-
Javascriptで指定した日付と時...
-
プルダウンの位置がwin/macでず...
-
jQueryで特定のURLの時のみ表示
-
オンマウスで、画像切り替え+...
-
バナー広告のように表示させた...
-
ランダム表示に加えwidthをブラ...
-
JavaScriptとチェックボックス...
-
ホォルダの読む込み
-
jQuery bxSlider 画像に変更
-
画像にロールオーバーするとメ...
おすすめ情報

