form HTML5이후로 action을 작성하지 않아도 된다. GET 방식과 POST방식이 있다.
==================== input : file
form에 enctype : multipart/form-data 를 무조건 추가. => form의 method = 무조건 post. => contents 를 주소로 보낼 수 없음
HTMLInputElement.files 속성은 선택한 파일(File) 목록을 FileList 객체로 반환합니다.
FileList는 배열처럼 행동하므로, length 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다.
name 파일 이름. lastModified 파일을 마지막으로 수정한 시각을 나타내는 숫자. UNIX 표준시(1970년 1월 1일 자정)으로부터 지난 시간을 밀리초 단위로 나타낸 값입니다. lastModifiedDate 파일을 마지막으로 수정한 시각을 나타내는 Date 객체. 더 이상 사용하지 않아야 합니다. lastModified를 대신 사용하세요. size 파일의 크기를 바이트 단위로 나타낸 값. type 파일의 MIME 유형. webkitRelativePath webkitdirectory 특성을 사용한 경우, 기준 디렉토리에 대한 파일의 상대적인 경로. 비표준 특성이므로 사용에 주의가 필요합니다.
결과적으로 잘~ 작동합니다! 하지만, 만약 저 코드 양이 방대해진다면, 본인은 물론 다른 사람도 보다가 미쳐서 모니터를 주먹으로 칠 수도 있습니다.
그래서 나온것이 Promise() 입니다.
예시2) Promise() : 여러 개의 then() 사용하기
function delayP(sec) { // 인자를 시간초만 받음
return new Promise( ( resolve, reject ) => { // Promise (성공, 실패) 선언
setTimeout(() => {
resolve (new Date().toISOString()) // resolve(성공)에 해당하는 항목
}, sec * 1000)
})
}
then()
delayP(1)
.then((result)=> {
console.log(1, result)
return delayP(1) // delayP() 를 return 시켜 새로운 promise를 실행하는 것. then으로 이어 받을 수 있다.
})
.then((result) => { // 2번 째 then을 통해서 위의 첫번째 then이 실행된 이후에 실행. 즉, 1초 + 1초 에 실행된다.
console.log(2, result)
})
Promise() .then() 을 사용하는 것의 장점은 더 말할 필요가 없이 보기가 쉽습니다.
또한 구분지어서 코드를 작성하는데에도 문제가 없죠.
출력 결과
하지만 만약 반환값(return)을 작성해주지 않는다면,
delayP(1)
.then((result)=> {
console.log(1, result)
return delayP(1) // delayP() 를 return 시켜 새로운 promise를 실행하는 것. then으로 이어 받을 수 있다.
})
.then((result) => { // 2번 째 then을 통해서 위의 첫번째 then이 실행된 이후에 실행. 즉, 1초 + 1초 에 실행된다.
console.log(2, result)
// return이 없다. => 다음 result = undefined가 될 것이다.
// return 'string or something' 하면 해당하는 내용이 바로 출력된다.
// => delay를 통해 해당 내용을 지연시키지 않았기 때문에.
})
.then((result) => { // 받은 return 값이 null 이기 때문에 undefined를 출력한다.
console.log(3, result) // 출력 내용 ( 3, undefined )
})
2번째then에서 return이 없습니다!
=> 3번째delayP( null ) 이 들어갔다는 뜻입니다.
그렇기 때문에 출력되는 것은( 3, undefined ) 가 됩니다.
출력 결과
추가적으로 sec 라는 인자도 전달이 안되었기 때문에 바로 세번째 then() 이 실행되어 3, result 가 출력되었습니다.
