<form>
<ul class="file_box">
<div class="input_box">
<input type="file" name="file1" id="bizFile">
<label id = "bizFile_label" for="bizFile" class="btn fileBtn" style="width: 100%">파일첨부하기</label>
<span id="fileName2"></span>
</div>
<li class="file_text">* 파일은 pdf, doc, docx, txt, rtf 형식만 사용할 수 있습니다.</li>
</ul>
</form>
support.html
let fakeInput = document.getElementById("bizFile");
fakeInput.addEventListener("change", function() {
var files = fakeInput.files;
console.log(files);
if(files.length === 0)
{
document.getElementById("bizFile_label").innerHTML = "파일첨부하기";
document.getElementById("bizFile_label").style.color = "#bababa";
}
else
{
let file = files[0];
console.log(file.name);
document.getElementById("bizFile_label").innerHTML = file.name;
document.getElementById("bizFile_label").style.color = "#000000";
}
});
support.js
내부에 있는 글자를 파일첨부하기로 바꾸고 첨부되었을때 블랙으로 file.name이 출력한다.
function ChangeSelect(e)
{
if(e.options[e.selectedIndex].value === "")
{
e.style.color = "#bababa";
}
else
{
e.style.color = "#000000";
}
}
/* select 했을 때 select값 검은색으로 변경*/
selet 했을 때 select 값이 검은색으로 변한다.
기존의 선택해주세요(제일 첫번째) 는 회색깔 유지
function SubmitData()
{
let name = document.getElementById("name").value;
let msg = document.getElementById("msg").value;
let email = document.getElementById("email").value;
let select_box = document.getElementById("select_box").value;
if(name === "")
{
alert("성함을 입력해주세요..");
document.getElementById("name").focus();
}
else if(msg === "")
{
alert("전화번호를 입력해주세요..");
document.getElementById("msg").focus();
}
else if(email === "")
{
alert("이메일을 입력해주세요..");
document.getElementById("email").focus();
}
else if(select_box === "")
{
alert("해당 공고의 채용 소식을 처음 접한 곳을 선택해주세요.");
document.getElementById("select_box").focus();
}
값을 입력하지 않았을 때 함수 호출 순서대로 입력하지 않는곳에 포커스로 움직이게 하였다.
예) email 입력하지 않으면 이메일을 입력해주세요로 이동한다.
{
Promise.resolve()
.then(resumeUpload)
.then(portfolioUpload)
.then(dbUpload)
.then(() => {
alert("지원 완료");
})
.catch(() => {
alert("지원 실패");
});
}
promise는 소스를 개발하였을 때 소스코드가 복잡해지는 것을 막기 위해 하나의 방식이다
promise.resolve 값이 호출되면 다음으로 넘어간다.
reject 값이 호출되면 다음으로 넘어가지 않고 종료된다.
resumeupload, portfolioupload, dbupload
순으로 하나라도 reject 값을 받으면 그다음 순서로 가지않는다.
마지막으로 모든 순서가 완료하면 지원 완료 창이 뜨고
그 전에 종료 되면 지원실패가 뜨게 설정하였다.