掲示板を非同期通信で入力→確認→表示で作成しております。
確認画面を下記のように作成しているのですが、新たに任意で画像アイコンをアップロードする機能を加えたいと考えております。(アップロードされていない場合はダミー画像を表示)
画像アイコンの条件を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も見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
Javascriptエラーの原因が分からない
JavaScript
-
C言語って古いですか?
C言語・C++・C#
-
IT業界より楽に稼げる業界ってあるんですか?銀行とか?
その他(プログラミング・Web制作)
-
-
4
なんでブラウザでPHPを動かすためだけにOSにPython2(Python3)を入れて、C(GCC)
PHP
-
5
プログラミング ソースコード
その他(プログラミング・Web制作)
-
6
ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといい
JavaScript
-
7
var exports = exports || {}; ← この意味を教えてください。
JavaScript
-
8
システムエンジニアの適正について
C言語・C++・C#
-
9
二次元配列を使って順位をだすときに、同点の場合の順位をだす方法を教えて下さい。
JavaScript
-
10
スカラーのベクトル微分
その他(プログラミング・Web制作)
-
11
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
12
JavaScript 超初心者です。 Document.writeがなぜか反映されません。何が間違っ
JavaScript
-
13
プログラミング言語の制作方法について
C言語・C++・C#
-
14
jsで質問です。 displayプロパティを用いて下記の情報4〜6のtrタグをボタンで表示・非表示を
JavaScript
-
15
変数名をどのようにつけるのが良いかアドバイスお願い致します
JavaScript
-
16
htmlで<form>~</form>を並べて記述すると一行置きに記述されてしまうのですがこれを回避
HTML・CSS
-
17
C言語 配列と関数の練習問題
C言語・C++・C#
-
18
テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ
HTML・CSS
-
19
どちのほうがすきですか?
C言語・C++・C#
-
20
プログラマーと学歴の関係性について
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像の上に画像リンクを貼る方法
-
Gifアニメ、最後のコマに行った...
-
画像ランダム表示、しかしダブ...
-
画像を切り替えランダム表示
-
画像をクリックしてその地点の...
-
画像クリック→メッセージボック...
-
innerHTMLで、表示すると、一部...
-
lightboxで複数サムネイル表示
-
HTMLで条件分岐はできますか?
-
残像を残しながらjpg画像を自動...
-
「画像の上を流れる文字列」を...
-
小窓について教えて下さい。
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
複数画像のランダム複数表示(...
-
【CSS】floatで左右に並べた...
-
Slick.jsのオプションrtlについて
-
クリックして変更した画像を他...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
1枚の画像をクリックして複数の...
-
HTMLで条件分岐はできますか?
-
Javascript で共通の処理をどこ...
-
Gifアニメ、最後のコマに行った...
-
JavaScriptとチェックボックス...
-
画像の重なりの順序を代える方...
-
画像ランダム表示、しかしダブ...
-
javascriptで毎月替わる画像
-
1枚の画像をクリックすると複数...
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報