티스토리 뷰

Develop Story

IE7이상에서 File type의 input form custom하기

gofly 2009. 11. 11. 12:59
저는 현재 당뇨관리 프로그램을 개발중에 있습니다.
오늘 File upload를 하다가 발견한 Bug가 있어 버그 없이 File upload를 하는 방법을 알아 보려고 한다.

우선 나의 개발 환경을 밝히 자면

개발툴(Tool) : eclipse galileo
개발 프레임워크(Framework) : struts 1.3.10v
개발시 사용하는 스크립트(Script): Jquery 1.3.2v
개발시 사용하는 DB Agent : iBatis

1.기존의 file type의 input form 태그를 커스텀 하던 방법

기존의 input form의 file type을 수정(custom) 하기 위해서 쓰던 꼼수가

style을 줘서 display:none하고 text와 img 또는 button type을 이용하여 click event가 있을 경우
event를 file type의 input form에 주어 파일을 찾게 한다.

그리고 파일을 고르고 나면 file type의 input form에 입력된 file path를 가져와 text type의 input form에 입력하여 마치 파일을 가져온 듯한 느낌을 주어 file type의 input form을 커스텀 하였다.

그런데 IE7이상에서는 이렇게 Custom하면 이상한 증상을 보였다.

아래 그림을 차근히 보자


 위의 내용을 원래 코드로 보면
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(function(){ 
                        /*findFile이라는 img tag를 클릭하면, 이벤트가 시작됩니다. */ 
                       $(":img[name=findFile]").click(function(){ 
                            /*findFile이라는 img를 클릭하면, file type input form인 attachFile에 click event를 가합니다.*/                           
                            $(":file[name=attachFile]").click(); 
                            /*또 동시에 filePath라는 text type의 input form에 attachFile의 값을 얻어와 입력합니다.*/
                            $(":input[name=filepath]") .val($(":file[name=attachFile]").val()); 
                       }); 
    }); 
</script> 

<body>
   <!-- Struts Tag lib를 이용한 form tag입니다. -->
   <html:file name="members" property="attachFile" style="display:none" styleId="file"/>
   <!-- HTML Text type input form입니다.-->
   <input type="text" name="filepath" id="file_txt" style="width:300px;" />
   <!-- Button을 대용하여 사용합니다.-->
   <img src="파일찾기.jpg" name="findFile" />
</body> 

아래와 같이 사진을 선택하게 됩니다.



사진을 선택하고 열기를 하게되면 아래의 그림 처럼 File path가 복사되게 됩니다.


Script를 사용하여 file type input form의 file path를 복사해서 text type의 input form에 저장합니다.


그런데 문제는 "확인"을 눌러 form 을 submit()하게 되면 text type input form은 그대로 있는데 file type input form이 Clear되는 것을 볼수가 있다.

사실 확인을 누르면 화면이 화면이 넘어가야 하는데 화면의 변화라고는 text type input form 뿐이다. 확인을 여러번 눌러야 form이 submit()된다.

사실 아래 트랙백 주소의 글에 보면 Access Denined라는 에러가 난다고 하는데, Struts Tag Lib를 써서 그런지 그런에러는 나지 않았다. 그냥 text type input form이 초기화 될 뿐이었다.


위와 같이 파일이 제대로 넘어가지 않았으니, DB에 저장될 파일의 이름도 온전히 될리가 없다.

지금 까지는 IE6전에 file type input form을 custom하는 방법과 그렇게 했을 때, IE7이상에서 나는 버그에 대해서 글을 써보았습니다.

그렇다면 위의 문제를 IE7이상에서는 어떻게 해결할 수 있을까?

2.IE7이상에서 file type의 input form 태그를 커스텀 하던 방법

이제 위의 버그(Bug)를 해결하는 방법을 알아보려고 한다.


우선 예전과 달라진 내용이 무엇인지 알아보려고 한다.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
   $(function(){ 
       /*그림중 save라는 이름을 가진 그림을 클릭하면 Form을 submit합니다. */ 
       $(":img[name=save]").click(function() $("form").submit(); }); 
       /*attachFile 이라는 file type form 클릭하면 change event를 실행합니다. 
          이때 어떤 change event를 실행하냐 하면 file이라는 id를가진 녀석의 value값을 취해서 file_txt라는 id를 가진 녀석에게 입력해 줍니               
          다.*/ 
       $(":file[name=attachFile]") .click(function(){}) .change(function(){ $("#file_txt").val($("#file").val()); }); 
   }); 
</script>

 <body>
   <input type="text"   id="file_txt" style="width:305px;margin-left:-60px;/>
   <span style="position:absolutet; overflow:hidden; width:55px; height:19px; margin-top:0px; background-image:url(이미지.gif);">       
     <html:file name="members" 
                   property="attachFile" 
                   styleId="file" 
                   style="opsition:absolute; left:-10px; width:0px; height:20px; filter:alpha(opacity=0);"/>
   </span>
 </body>



이제 이렇게 코딩된 것을 시험해 보자면 아까처럼 사진을 선택하고 열기를 누릅니다.

그럼 아래의 그림처럼 text type input form에 파일 경로가 입력됩니다. 하지만 위의 형식과 같이 file type input form에 입력된 값을 복사해온 것이죠....



이렇게 file path를 입력 받은 상황에서 "확인 버튼을 누르면 아래 그림 처럼 확장명까지 해서 아주 그림이 잘 들어가 있는 것을 알 수 있습니다. 확인 버튼을 누르면 한 번 에 입력된답니다.....ㅋㅋㅋㅋㅋㅋ


참말로 MS때문에 아주 문제입니다....

사용자야 멋모르고 쓰시면 되지만 개발자들의 입장에선 어떤놈을 기준으로 해야 할지를 매 개발때마다
고려하고 시험해 봐야 하니까 말이죠....;;; IE6는 사실 한국 WEB 개발 환경을 저해했다고 저는 생각합니다.


IE7과 IE8은 그런 부분을 바로 잡고자 했고, 또 W3C에 표준안을 많이 냈다고 하더군요....뭐 좋습니다
그런데  저는 IE8을 쓰는데 가끔 에러가 나면 IE7모드로 몰리곤합니다. 그런데 IE7과 IE8마저도 아주 틀린게 많더군요 CSS해석 하는 것도 그렇구요.

아주 MS가 우리나라 IT의 저해를 가져오고 있다는 사실과 함께, 도대체 MS의 프로그래머는 프로그램을 할줄 아는걸까? 아니면 걍 프로그램을 만들줄만 아는 걸까 하는 것도 생각해 보게 됩니다....;;;;




'Develop Story' 카테고리의 다른 글

Apache Cordova 크로스 플랫폼 HTML5 어플리케이션 만들기-1장  (0) 2012.05.15
누리꿈 스퀘어 CJ HelloVision오다!!!! ㅋㅋㅋㅋ  (0) 2012.05.07
HotSwap기능이 있는 JRebel 공짜로 쓰기!!!!  (6) 2012.04.25
윈도우에서 PHP + SQL 수동으로 세팅하기  (2) 2010.03.20
윈도우 에서 Apache + PHP 수동으로 세팅하기  (0) 2010.03.05