single-input.php
Language
PHP
Compiler
php 8.2.1
Options
single-input.php
$ php prog.php <form method="post">
<div class="contents-selector-button">
<label for="inputFile" class="viewFile">
<div>
<img src="img/camera.jpg" class="changeImg" style="height: 100px;">
</div>
</label>
<input type="file" class="inputFile" class="hideItems" accept=".png, .jpg, .jpeg, .pdf, .mp4">
</div>
<div class="contents-selector-button">
<label for="inputFile" class="viewFile">
<div>
<img src="img/camera.jpg" class="changeImg" style="height: 100px;">
</div>
</label>
<input type="file" id="inputFile" class="hideItems" accept=".png, .jpg, .jpeg, .pdf, .mp4">
</div>
<button type="button" class="attachclear">clear
</button>
<!--<div class="viewer"></div>-->
</form>
<script>
window.addEventListener('DOMContentLoaded', function() {
const inputFile = document.getElementById('inputFile');
// 入力される画像 const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像
const viewFile = document.querySelectorAll('.viewFile'); // 入力されたら表示する画像 const fileHeight
= "100px" // 置き換えた後のファイルの高さ //const resetButtons = document.querySelectorAll('.attachclear');
for (let i = 0; i <
changeImg.length; i++) {
inputFile[i].addEventListener(
'change', e => {
const fileDate = inputFile[i].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[i].classList.add('hideItems'); // もともとの画像を消す
newElement.style.height = fileHeight;
newElement.src = URL.createObjectURL(fileDate);
viewFile[i].appendChild(newElement);
})
}
}) window.addEventListener('DOMContentLoaded',
function() {
const resetButtons = document.querySelectorAll('.attachclear'); //
押されたらファイルをリセットする
for (let i = 0; i <
attachclear.length; i++) {
button[i].addEventListener(
'click', e => {
const nextElement = changeImg[i].nextElementSibling; // changeImgの次の要素 if (nextElement)
{
changeImg[i].classList.remove('hideItems') nextElement.remove();
}
})
});
<script>Exit Code:
0