파일찾기 버튼을 이미지로 바꾸기
저희 카페에 올렸던 글입니다. 도움이 될까 싶어서 여기에도 올려봅니다.
<!--- 파일찾기 버튼을 이미지로 바꾸는 편법입니다.
가끔 열심히 즐코딩하다가 보면 옆에 있는 말씀없는 디자이너께서 한마디 상의도 없이 너무도 예쁜 파일찾기 버튼을 디자인
해서 주십니다. 일단 정상적인 방법으로는 바꿀방법이 없슴을 우리는 알고 있습니다. 하지만 개발자 자존심에 그거 원래 안
된다고 말할 수 도 없구... 어떻게든 바꿔볼려고 노력하다 정말 머리 좋으신 분들이 제시해준 편법을 이용해서 바꾸는 방법을
찾게되고 기쁜마음에 적용해 보게됩니다... 하지만
허걱~~~ 버튼클릭해서 이미지를 선택하는것까지는 가능한데 전송이 안됩니다.
document.form.submit 부분만 만나면 그대로 오류 메시지 띄우고 전송버튼 반복해서 몇번 클릭해보면 파일 업로드 없
이 form.action 에서 정의해준 페이지로 걍~~~넘어갑니다. 이유는 이미지 클릭시 파일찾기 버튼이 클릭된 것처럼 속여주는 것인데 전송(submit) 버튼 클릭시 <input type="file"> 의 value값이 깨끗이 초기화되어 버려서 파일의 값이 넘어갈 방법이 없는것이 문제입니다. 아래 소스는 파일찾기 버튼을 이미지로 바꾸는 편법 세가지입니다. 그중 form3에 정의된 세번째 예제만 정상적으로 파일전송이 이루어집니다. 키포인트는 opacity값을 0으로 주어 원래 파일찾기 버튼을 감추는 것입니다. ---->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>파일업로드 테스트</title>
<script language="javascript">
<!--
function checkFile(form)
{
if ( form.file_text.value.length == 0 )
{
alert('파일을 선택하지 않으면 혼날수도 있습니다.');
return false;
}
else
{
form.action = "http://cafe.naver.com/webdeveloper.cafe"
form.submit();
}
}
-->
</script>
</head>
<body>
<!----전송 에러 Form ----->
<form name="form1" method="post" enctype="multipart/form-data">
<input type="file" name="upfile" style="display:none;" onchange="document.form1.file_text.value=this.value;this.blur();">
<input type="text" name="file_text" size="30" maxlength="30" readonly >
<img src="http://blogimgs.naver.com/imgs/btn_addfile3.gif" width="56" height="20" align="absmiddle" onmouseover="this.style.cursor='hand';" onclick="document.form1.upfile.click();">
<br><br>
<input type="button" value="전송" onClick="javascript:checkFile(this.form)">
</form>
<!----전송 에러 Form---->
<form name="form2" method="post" enctype="multipart/form-data">
<input type=text name="file_text" size="30" maxlength="30" readonly >
<span style="overflow:hidden; width:56; height:20; background-image:url(http://blogimgs.naver.com/imgs/btn_addfile3.gif);" onclick='upfile.click()'>
</span>
<input type=file name='upfile' style="width:0;height:20;filter:alpha(opacity=0);" onchange='file_text.value=this.value'><br><br>
<input type="button" value="전송" onClick="javascript:checkFile(this.form)">
</form>
<!----정상 전송 Form---->
<form name="form3" method="post" enctype="multipart/form-data">
<input type=text name="file_text" size="30" maxlength="30" readonly >
<span style="overflow:hidden; width:56; height:20; background-image:url(http://blogimgs.naver.com/imgs/btn_addfile3.gif);">
<input type=file name='upfile' style="width:0;height:20;filter:alpha(opacity=0);" onchange='file_text.value=this.value'>
</span>
<br><br>
<input type="button" value="전송" onClick="javascript:checkFile(this.form)">
</form>
</body>
</html>
|
출처: http://cafe.naver.com/webdevloper.cafe
|
|
|
|
웹마당넷
컴쟁이
;){kind=link}