input type 'file' 값 변경 불가

 

# input file의 value는 우리가 임의로 세팅 할 수 없다.

다른 text, check, hidden등  xx.value = yyy 로 값을 임의로 줄 수 있지만

input file은 보안상의 이유로 세팅 할 수 없다. (기본) 

아마 읽기 전용인듯 하다.

# file 선택 창에서 취소버튼 누른결과를 우린 알 수 없다.

또한 file의 선택창에서 취소 버튼누른결과를 우린 알 수 없다.(이것또한 보안상 이유인가?)

하지만 우리는 onChange이벤트로 this.value의 길이가 0이면 파일을 선택안했단 뜻이니 이런식으로 처리

( 또는 $(this).files 의 length가 0일경우 )

( $(this).files[0].name )

# 활용

jQuery 사용 시

           $('input[type=file]')[0].files[0].name            파일명

           $('input[type=file]')[0].files[0].name.type      파일타입

           $('input[type=file]')[0].files[0].name.size       파일크기   

순수 JavaScript 사용 시 

           obj.files[0].name

단, 위 jQuery는 무조건 selector가 배열 형식으로 [0]과같이 배열번호를 줘야하고

밑 순수 js에서는 obj가 객체 그 유일한 존재이므로 배열이 아니다 

또한 위 files속성은 해당 파일이 선택되어야 오류가 안난다!

( onclick이벤트로 this값을 가져왔을 때 클릭은 되었지만 파일이 선택이 안되어 files속성을 쓸 때 

오류가 난다. onchange의 this일 경우 파일이 선택되어야만 이벤트가 일어나므로 

files속성을 그냥 쓸 수 있었다 )

PS.

파일 선택 팝업을 원하는 기능으로 제작 하고 싶었지만 제한 되는 것이 많았다.

그래서 많은 사람들이 외부 플러그인을 사용 하는 것 같다.  

하지만 연습 삼아 직접 만드는 것도 괜찮은 것 같다.