<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.green{
color: green;
}
.red{
color: red;
}
</style>
</head>
<body>
<!--
input 파일에 파일명.확장자 입력하여 전송버튼을 누르면
이미지파일인지 검사하여
이미지파일이면 '정상파일입니다.'
이미지 파일이 아니면 '이미지 파일만 가능합니다'
라고 출력하기
이미지파일 : jpg, png, jpeg, gif
- 대문자로 된 확장자명도 판단 가능해야 함.
-->
파일명 : <input type="text" id="fileName">
<button type="button" id="subBtn">전송</button>
<h3 id="result">
</h3>
<script>
function imgeFileValid(image){
let imageFileName = image.toLowerCase(); //소문자로 변환
return imageFileName.endsWith('png') ? true
: imageFileName.endsWith('jpg') ? true
: imageFileName.endsWith('jpeg')? true
: imageFileName.endsWith('gif')? true: false;
}
document.getElementById('subBtn').addEventListener('click',function(){
let fileName = document.getElementById('fileName').value;
let imgTrue = `<span class="green">정상 파일입니다.</span>`;
let imgFalse = `<span class="red">이미지 파일만 가능합니다.</span>`;
document.getElementById('result').innerHTML =
imgeFileValid(fileName) ? imgTrue : imgFalse;
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파일명 찾기</title>
</head>
<body>
파일명 : <input type="text" id="fileName">
<button type="button" id="subBtn">전송</button>
<!-- input에 파일명.확장자를 넣고 버튼을 누르면,
이미지 파일인지 검사하여
이미지면 '정상파일입니다' 출력 아니면 '이미지파일만 가능합니다' 출력
이미지 파일이려면) jpg png jpeg gif
+ 대소문자 구분 없이 되게끔!-->
<h3 id="print"></h3>
<script>
document.getElementById('subBtn').addEventListener('click',()=>{
// let file = 'jpg, png, jpeg, gif';
let name = document.getElementById('fileName').value;
let find= name.substring(name.indexOf('.')+1).toLowerCase();
if(find == 'png' || find == 'png' || find == 'jpeg' || find == 'gif'){
document.getElementById('print').innerText = `${name}은 이미지파일입니다.`;
} else {
document.getElementById('print').innerText = `${name}은 이미지파일이 아닙니다`;
}
})
</script>
</body>
</html>
'HTML.CSS.JS > JS' 카테고리의 다른 글
| [JS] 비표준 속성 non_standard (0) | 2023.04.20 |
|---|---|
| [JS] 비동기통신 ( async await ,promise Chain ) (0) | 2023.04.20 |
| [JS] 가위바위보 게임 (0) | 2023.04.19 |
| [JS] day12_홈페이지 사진 변경 (0) | 2023.04.19 |
| [JS] day12_parameter ( arguments, 옵셔널, ... ) (0) | 2023.04.19 |