<input type="file" ...> 이라는 태그는
사용자가 찾아보기 버튼을 클릭해서 자신이 원하는 파일을 찾아서 선택할 수 있는 기능을 제공해 주는 태그입니다.
하지만, 이 태그의 단점은 기능을 제공하려는 사람의 의지와는 상관없이 찾아보기 버튼이 회색의 버튼으로 정해져 있다는 것이죠..
(물론 이 두 가지 방법은 제가 알고 있는 범위내의 방법입니다. ㅡㅡ;;;)
그 첫번째 방법은..
<input type="file" ...> 태그의 기능을 <input type="text" ...> & <img src="image path" ...>의 두 태그를 통해 이용하는 것입니다.
▤ 구현 방법
<TR>
<TD>
<input type="file" name="file" style="display:none;">
<img src="image path" width="50" height="50" border="0" onclick="document.all.file.click();
document.all.text.value=document.all.file.value">
</TD>
</TR>
...
두번째 방법은 구현 방법을 적고 설명하도록 하겠습니다.
▤ 구현 방법
<TR>
<TD>
<img src="image path" width="50" height="50" border="0" align="absmiddle">
<input type="file" name="file" style="filter:alpha(opacity-=0); cursor:hand"
onchange="document.all.text.value=document.all.file.value">
</div>
</TD>
</TR>
...
사용자는 이미지 버튼을 눌러서 동작하는 것처럼 보이지만 실제로 동작되는 부분은 부분이며 변화된 결과값이 onchange라는 기능을 통해 <input type="text" ...>로 값이 전해져 사용자에게 보이게 되는 것입니다.
단, 구현시 부분이 부분 뒤에 완벽하게 숨을 수 있도록 조절해 줘야 한다는 것을 잊지 마세요~^^
위의 내용을 수정하려고 합니다.
수정 이유:
첫번째 방법으로 구현했더니 자바 스크립트에서 submit()시에 "액세스 거부" 에러가 발생했습니다.
두번째 방법은 소개한 방법보다 조금 더 쉬운 방법을 알게되어 수정하게 되었습니다.
그럼 쉬운 방법을 소개합니다.
※ 아래 스크립트는 <IE 전용> 임을 알려드립니다.
▤ 구현 방법
<form action='' enctype="multipart/form-data">
<input type=text name=photo class="in_gray" size="50" maxlength="50">
<span style="overflow:hidden; width:61; height:20; background-image:url(src path);">
<input type='file' name=attachedfile style="width:0;height:20;filter:alpha(opacity=0);"
onchange='photo.value=this.value'>
</span>
</form>
위와 같이 구현하면 조금 더 쉽게 사용할 수 있습니다. width와 height 부분이나 style 부분만 사용자에게 맞게 설정하셔서 쓰시면 될 듯 합니다.
혹시나 저의 잘못된 정보로 인해 고생하신 분들이 없길 바랍니다.
▤ 배운것
<input type='file'> 은 처음에 소개한 첫번째 방법처럼 다른 버튼을 통해 설정되도록 해서는 안되며 value값이 읽기전용으로 되어 있기 때문에 초기화 시킬 때도
document.form_name.file_type_name = "" 식으로 해서는 안된다는 것입니다.
초기화 방법에 대해서도 나중에 다시 글을 올리도록 하겠습니다. ^^
도움글 :
http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=44090&sca=&sfl=wr_subject&stx=%C6%C4%C0%CF%C3%A3%B1%E2&sop=and
참고할만한 글 :
http://blog.naver.com/takanoer?Redirect=Log&logNo=90019611725
http://blog.empas.com/richardkiwoo/13442563