jQuery 공작소 : :file

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

:file 셀렉터는 폼 요소중 파일입력폼을 찾습니다.

예제 1
폼 요소중 파일 입력폼 찾기
보기
소스
<style type="text/css">
    .css_test {
        margin : 0 auto;
        text-align : center;
        width : 500px;
    }
    .css_test input, .css_test textarea {
        border-radius : 5px;
        border : 3px solid gray;
        margin-top : 10px;
        padding : 7px;
    }
</style>

<button type="button" onclick="$('.css_test :file').css('border-color', 'red')">눌러보세용</button>
<button type="button" onclick="$('.css_test :file').css('border-color', '')">다시하기</button>

<div class="css_test">
    <input type="button" value="Input Button">
    <input type="checkbox">
    <input type="file">
    <input type="hidden">
    <input type="image" src="//superkts.com/img/css/huk.gif">
    <input type="password">
    <input type="radio">
    <input type="reset">
    <input type="submit">
    <input type="text">
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
</div>
관련 CSS
jQuery

$( '.css_test  :file' )  -  클래스명이 css_test 인 요소에서 파일입력폼만 찾습니다.

예제 2
번외) 파일 선택 폼의 특성
보기
소스
<style type="text/css">
    .css_test input {
        border-radius : 5px;
        border : 3px solid gray;
        padding : 7px;
        width : 400px;
    }
</style>

<button type="button" onclick="alert($('.css_test :file').val())">값 읽기</button>
<button type="button" onclick="$('.css_test :file').val('제이쿼리 공작소.txt')">값 쓰기</button>

<div class="css_test mt10">
    <input type="file">
</div>
관련 CSS
jQuery

- 파일 선택폼은 읽기 전용입니다.
- 직접 파일을 선택하고 예제의 값 읽기 버튼을 누러보면 해당 파일의 경로나 이름이 보입니다.
- 이때 경로가 좀 다르게 보일 수 있습니다. 보안문제 때문입니다.

- 예제에서 값 쓰기 버튼을 눌러도 값이 입력되지 않습니다.
- 그리고 값을 임의로 넣을 수 없는 이유도 중요한 보안문제 때문입니다.
- 만약 값을 넣을 수 있다면 이런게 가능해 집니다. 가령 어떤 페이지에 접속했더니 ...
- 윈도우의 특정 파일의 경로를 스크립트로 설정하고 전송까지 해버린다면 어떻게 될까요? ㄷㄷ

- 그런 의미에서 파일 전송폼의 찾기 버튼을 이미지로 바꾸는것도 대단히 어렵습니다.

jQuery 홈페이지 :file API 문서 : http://api.jquery.com/file-selector/