ファイルのアップロード機能を作成していて、アップロードする場所にカメラの画像を配置しているのですが、ファイルをアップロードするとその下に画像や動画やpdfが表示されてしまいます。
ファイルを選択したあと?アップロード後?にカメラの画像を見えなくしてその上からアップロードファイルを表示することは出来ますでしょうか?
※参考サイト
http://www.irasuto.cfbx.jp/掲示板テスト/
<form method="post">
<div class="image-partial">
<h2>動画・画像をアップロード(Upload video・image)<span class="required">※ファイルサイズ15MB以内、JPG/GIF/PNG/MP4</span></h2>
<div class="image-selector-button">
<label>
<div class="image-camera-icon">
<img src="<?php echo $camera_url; ?>" style="height: 100px;">
</div>
<input type="file" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .pdf, .mp4" style="display: none;">
</label>
<input type="hidden" class="attachdel" name="attachdel[]">
<button type="button" class="attachclear">clear</button>
<div class="viewer"><?php echo $attach[0]; ?></div>
</div>
<div class="image-selector-button">
<label>
<div class="image-camera-icon">
<img src="<?php echo $camera_url; ?>" style="height: 100px;">
</div>
<input type="file" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .pdf, .mp4" style="display: none;">
</label>
<input type="hidden" class="attachdel" name="attachdel[]">
<button type="button" class="attachclear">clear</button>
<div class="viewer"><?php echo $attach[1]; ?></div>
</div>
</div>
</form>
<script>
const attach = document.querySelectorAll('.attach');
const del = document.querySelectorAll('.attachdel');
const clear = document.querySelectorAll('.attachclear');
const viewer = document.querySelectorAll('.viewer');
for (let i = 0; i < attach.length; i++) {
attach[i].addEventListener('change', () => {
if (attach[i].files[0].size > 15 * 1024 * 1024) {
alert('ファイルサイズが 15MBバイトを超えています');
return;
}
del[i].value = "";
viewer[i].innerHTML = "";
if (attach[i].files.length !== 0) {
const reader = new FileReader();
reader.onload = () => {
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");
} else {
alert("対象外のファイルです");
alert(reader.result);
attach[i].value = "";
}
if (child !== null) {
child.style.height = "100px";
child.src = reader.result;
viewer[i].appendChild(child);
}
};
reader.readAsDataURL(attach[i].files[0]);
}
});
clear[i].addEventListener('click', () => {
attach[i].value = "";
del[i].value = "1";
viewer[i].innerHTML = "";
});
}
</script>
No.3ベストアンサー
- 回答日時:
No2です。
>ファイルを削除することもできなくなるのではないでしょうか?
「ファイルを削除」するわけではなくて、表示を消すだけだと思いますけれど? 違うのかな?
消去するのなら、Clearボタンでできるのではないでしょうか?
(ボタンは表示されたままなので、押すことは可能です)
もしも、表示中の画像クリックでも消したければ、そちらにも同様のイベントを設定しておけば可能になります。
No2の表示の変化で良いのかどうかも不明のままですけれど、まだ意味が伝わらないようなので、No2に簡単なスクリプトを追加してみました。
動作イメージだけなので、受付けるのは画像(=.jpg .png)だけにしてあります。
(イベントは、カメラの画像とClearボタンのみ)
Chrome、fx で動作確認。
※ 質問者様がお求めのものに合っているのかが不明ですが、これ以上は説明のしようもないので、違っているならスルーしてください。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 通常時のレイアウト */
form > div { display: flex; }
.image-selector-button {
position: relative;
margin: .3em;
}
.image-selector-button label img {
width: 200px; height: 100px;
}
.image-selector-button input { display: none; }
/* 画像表示時のレイアウト */
.image-selector-button.image-on label { visibility: hidden; }
.image-selector-button.image-on .viewer {
position: absolute;
top:0; left: 0;
width: 100%; height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<form method="post">
<div>
<div class="image-selector-button">
<label>
<div><img src="img/camera.jpg"></div>
<input type="file" accept=".png, .jpg">
</label>
<input type="hidden">
<button type="button">clear</button>
<div class="viewer"></div>
</div>
</div>
</form>
<script>
(()=>{
const
fileTypes = ['image/jpeg','image/png'],
wrap = document.querySelector('form > div'),
P = e => e.closest('.image-selector-button'),
V = e => P(e).querySelector('.viewer'),
C = (e, s) => P(e).classList[s]('image-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');
});
/* 画像登録 */
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;
const img = document.createElement('img');
img.src = URL.createObjectURL(t.files[0]);
img.style.height = '100px';
V(t).appendChild(img);
C(t, 'add');
});
})();
</script>
</body>
</html>
回答ありがとうございます、クラスをあらかじめ2つ用意した状態で切り替えることで、cssで表示非表示を切り替えるという感じでしょうか?
No.2
- 回答日時:
No1です。
>A.おそらく下記のアップロードファイル削除のことだと思いますが
違います。
下にある画像がはみ出して見えてしまう可能性を防止するために、visibility: hidden; にすると言う意味です。
(縦長画像を入力すると、下の画像がはみ出して見えるはず)
非表示にすると、設定してあるイベントも効かなくなりますが、画像表示中はイベントが効かなくても良いものと推測しました。
clear等で親のクラスを削除すれば、最初の表示に戻るので、再度イベントも感知できるようになります。
あまり意味が伝わっていないようですので、簡略化した例を以下に。
元のHTMLの構造はほぼそのままです。(属性等は簡略化してあります)
左側の div を、仮に、現状で画像を表示した状態と考えてください。
(画像部分には、お手元の適当な画像を入れてください)
右側も、全く同じHTMLですが、親要素に「image-on」のクラスを付してあります。
No1の回答はこのクラスを付すことで、画像を入れ替えたように見せることが可能という意味です。
(ご質問の内容は、このような表示になさりたいということではないかと解釈しました)
クラスを外せば左側のレイアウトに戻りますが、その際には、実際には入力画像は消されていて表示されないはずと推測します。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 通常時のレイアウト */
form > div { display: flex; }
.image-selector-button {
position: relative;
margin: .3em;
}
.image-selector-button label img {
width: 200px; height: 100px;
}
.image-selector-button input { display: none; }
/* 画像表示時のレイアウト */
.image-selector-button.image-on label { visibility: hidden; }
.image-selector-button.image-on .viewer {
position: absolute;
top:0; left: 0;
width: 100%; height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<form method="post">
<div>
<div class="image-selector-button">
<label>
<div><img src="img/camera.jpg"></div>
<input type="file" accept=".png, .jpg">
</label>
<input type="hidden">
<button type="button">clear</button>
<div class="viewer">
<img src="img/photo01.jpg" style="height:100px;">
</div>
</div>
<div class="image-selector-button image-on">
<label>
<div><img src="img/camera.jpg"></div>
<input type="file" accept=".png, .jpg">
</label>
<input type="hidden">
<button type="button">clear</button>
<div class="viewer">
<img src="img/photo01.jpg" style="height:100px;">
</div>
</div>
</div>
</form>
</body>
</html>
A.回答ありがとうございます。
画像表示中はイベントが効かないとのことですが、ファイルを削除することもできなくなるのではないでしょうか?
clear[i].addEventListener('click', () => {
attach[i].value = "";
del[i].value = "1";
viewer[i].innerHTML = "";
});
No.1
- 回答日時:
こんばんは
ざっと見ただけですが・・・
>カメラの画像を見えなくしてその上からアップロード
>ファイルを表示することは出来ますでしょうか?
カメラの画像と同じ位置に、新しい画像等を表示したいということですよね?
要素を入れ替えても良いのなら、label要素を削除して、同じ位置に画像等を挿入すれば良いです。
ただし、他のスクリプトが、label等が存在することを前提にしているようなので、文書を変える方法だとスクリプト全体を見直す必要がありそうですね。
現状のままで行いたいのなら、処理はそのままにしておいて、画像を表示する位置(レイアウト)を変えてあげれば、それでも可能と思います。
inline-blockにしているdiv要素を、position: relative; にしておいて、画像を表示したらそのエレメントを
position: absolute;
top: 0; left:0;
になるように設定すれば、カメラの画像(=div内の最初の要素)に重なります。
(多分、サイズの指定も必要かも知れません)
ただし、上にくる画像のサイズによっては、下の画像がはみ出して見えてしまう可能性があります。
イベントを使えなくしても良いのなら(多分かまわないのだろうと推測しますが)、下のlabel要素は visibility: hidden; にしてしまうとか。(display:noneでも良いですが、buttonが上に移動します)
複数要素のstyleを変えることになるので、個別に設定していくよりも、親要素に「表示モードを切り替えるクラス」を用意しておいて、親要素のクラス設定だけで、レイアウトを変えられるようにしておくのが簡単そうな気がします。
・画像を表示したらクラスを設定
・画像を削除したらクラスを削除
のような処理を追加するだけで済むと思いますので。
Q.カメラの画像と同じ位置に、新しい画像等を表示したいということですよね?
A.回答ありがとうございます、そういうことになりますね。
Q.inline-blockにしているdiv要素を、position: relative; にしておいて、画像を表示したらそのエレメントを
position: absolute;
top: 0; left:0;
になるように設定すれば、カメラの画像(=div内の最初の要素)に重なります。
(多分、サイズの指定も必要かも知れません)
A.その発想はありませんでしたが、確かに重ねることで下のカメラ画像を隠すことも可能ですね。
Q.イベントを使えなくしても良いのなら(多分かまわないのだろうと推測しますが)、下のlabel要素は visibility: hidden; にしてしまうとか。(display:noneでも良いですが、buttonが上に移動します)
A.おそらく下記のアップロードファイル削除のことだと思いますが、こちらは残したうえで実装したいと考えております。
clear[i].addEventListener('click', () => {
attach[i].value = "";
del[i].value = "1";
viewer[i].innerHTML = "";
});
}
Q.複数要素のstyleを変えることになるので、個別に設定していくよりも、親要素に「表示モードを切り替えるクラス」を用意しておいて、親要素のクラス設定だけで、レイアウトを変えられるようにしておくのが簡単そうな気がします。
・画像を表示したらクラスを設定
・画像を削除したらクラスを削除
のような処理を追加するだけで済むと思いますので。
A.アドバイスありがとうございます、そのようなことも考えてみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アップロードファイルの種類に...
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
オンマウスで画像表示+表示し...
-
一定時間で入れ替わるバナー画...
-
クリックでクリッカブルマップ...
-
時間差で画像を動作させたいjav...
-
全部のサイコロをjavascriptで...
-
IE6でmax-width:100px; max-hei...
-
clear機能を失わずにファイルア...
-
Javascript初心者|jQueryの.va...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
HTMLで条件分岐はできますか?
-
HTMLですCSSです 画像のように...
-
Slick.jsのオプションrtlについて
-
スタイルシートで画面を上下に...
-
大分類・中分類・小分類
-
textareaに画像を表示したい
-
javascriptテキストBOX色を元に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Colorboxがうまく設置できません
-
デフォルト非表示にしたい。【t...
-
「画像クリックで音声再生」を ...
-
Javascript初心者|jQueryの.va...
-
jQueryで同じクラス名のものを...
-
複数bxsliderをタブで切り替え...
-
画像の表示位置
-
embed要素のsrc属性の値を変更...
-
JQueryでオープニングアニメー...
-
jQueryでのドラッグアンドドロ...
-
全部のサイコロをjavascriptで...
-
JavaScriptでクレイアニメ。ち...
-
bxsliderで最初に縦に複数表示...
-
アップロードファイルの種類に...
-
clear機能を失わずにファイルア...
-
JavaScriptでの画像切り替えを...
-
マウスカーソルに合わせて画像...
-
交互に入れ替わる画像を複数配置
-
サイトに横スクロールのスライ...
-
サムネイルにカーソルを合わせ...
おすすめ情報