IE 7.0 에서 테스트 하였음.

 

현재 IE 7.0 에서의 보안상 문제로 해당 미리보기 기능을 익스플로러에서

 

막아버렸다.

 

출처 : http://blog.naver.com/elduque?Redirect=Log&logNo=120054102471

이곳에 간략한 Q/A 가 있다.

퍼왔으니 함 읽어나 보자...

왜 안되는지 알아야~ 윗분한테 말한마디 건넬 수 있지 않은가?

 

 
  • Q. 로컬 PC의 이미지를 웹 페이지에 업로드 할 경우 이미지 미리보기에서 이미지가 정상적으로 표시되지 않는 현상 발생.

    A.

    원인: IE7에서 강화된 로컬 리소스 접근 제한이라는 보안 기능 때문에 발생하는 것으로 로컬 PC의 이미지, 스크립트, 객체에 대해서 업로드를 받지 않고 접근할 경우에는 차단됨.
    → 해결방안: 해당 객체를 서버의 임시저장소로 업로드 후 처리하는 방식으로 변경
  •  

    ㅡ_ㅡ; 젠장할 5시간을 구글링에 16가지의 전세계(???) 의 MS 에반젤리스트를 중점으로 뒤져봐도

     

    없던 것이

     

    국내의 블로그에 해당 글이 있었다.

    (저건 구라고~ 구글링 30페이지 뒤져보고 ASP.NET 포럼 졸라 뒤졌는데.... 그네들도 뭐 ㅡ_ㅡ;;; )

     

    테스트 환경 적어본다.

    집PC (테스트 OK)

    OS : WinXP Pro

    툴 : Visual Studio 2008

    .NET : version 3.5

    브라우저 : IE 8

     

    회사PC (테스트 OK)

    OS : WinServer 2003

    툴 : Visual Studio 2008

    .NET : version 3.5

    브라우저 : IE 7

     

    퍼온 소스를 적어본다.

     

    출처 :

    http://junyong.pe.kr/98 - junyong's blog - http://junyong.pe.kr/

     

     

    이미지 파일첨부시 업로드 이미지 미리보기 (IE8, Firefox 3)

    script 2009/09/03 18:21
    IE8에서 이미지 업로드시 기존의 돌아다니는 소스들은 이미지 미리보기 기능이 동작하지 않았다
    IE8에서는 file의 경로(obj.value)를 가져오면 실제 클라이언트의 경로대신 
    보안상의 이유로 'fakepath'라는 경로를 반환한다.

    그래서 플래시업로드를 이용하면 가능한 방법들이 많다. (ex. http://code.google.com/p/swfupload/)
    그러나 플래시를 이용하지 않고 방법이 없을까 하고 구글링 중에 찾은 포스팅이 있었다.
    소스를 보니 IE8에서는 브라우저 클립보드를 이용해서 클라이언트경로를 가져오는 것이다 ! 
    근데 클립보드를 사용하려면 클립보드를 엑세스한다는 창이 뜬다. 

    그래서 좀 더 괜찮은 방법이 없나 생각해서 좀 바꿔보았다.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title></title>
        <style type="text/css">
            .preView { width: 70px; height: 70px; text-align: center; border:1px solid silver; }
        </style>
        <script type="text/javascript">

            function fileUploadPreview(thisObj, preViewer) {
                if(!/(\.gif|\.jpg|\.jpeg|\.png)$/i.test(thisObj.value)) {
                    alert("이미지 형식의 파일을 선택하십시오");
                    return;
                }

                preViewer = (typeof(preViewer) == "object") ? preViewer : document.getElementById(preViewer);
                var ua = window.navigator.userAgent;

                if (ua.indexOf("MSIE") > -1) {
                    var img_path = "";
                    if (thisObj.value.indexOf("\\fakepath\\") < 0) {
                        img_path = thisObj.value;
                    } else {
                        thisObj.select();
                        var selectionRange = document.selection.createRange();
                        img_path = selectionRange.text.toString();
                        thisObj.blur();
                    }
                    preViewer.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fi" + "le://" + img_path + "', sizingMethod='scale')";
                } else {
                    preViewer.innerHTML = "";
                    var W = preViewer.offsetWidth;
                    var H = preViewer.offsetHeight;
                    var tmpImage = document.createElement("img");
                    preViewer.appendChild(tmpImage);

                    tmpImage.onerror = function () {
                        return preViewer.innerHTML = "";
                    }

                    tmpImage.onload = function () {
                        if (this.width > W) {
                            this.height = this.height / (this.width / W);
                            this.width = W;
                        }
                        if (this.height > H) {
                            this.width = this.width / (this.height / H);
                            this.height = H;
                        }
                    }
                    if (ua.indexOf("Firefox/3") > -1) {
                        var picData = thisObj.files.item(0).getAsDataURL();
                        tmpImage.src = picData;
                    } else {
                        tmpImage.src = "file://" + thisObj.value;
                    }
                }
            }

        </script>
    </head>
    <body>
        <input id="fileData" name="fileData" type="file" onchange="fileUploadPreview(this, 'preView')" />
        <div id="preView" class="preView" title="이미지미리보기"></div>
    </body>
    </html>

    SyntaxHighlighter에서 doctype과 html태그를 빼버려서 그냥 box로 ;;

    기존 소스에서  클립보드부분을 다르게 바꿨다.(약간은 내 맘대로 수정 : )
    문제가 있다면 삭제 하겠습니다.(트랙백 날립니다~)

    테스트 한 브라우저는 일단 IE8, IE7, IE6, Firefox 3.5.2 ! 끝 !

     

    밑의 내용은 IE 8 호환성모드에 대해 에러가 나는 것을

    어떤 분이 제보해 주신 글이다.

     

     jucke 2009/10/08 09:11 Modify/Delete Reply

    안녕하세요. 잘 작동하긴 하는데요 IE8의 호환성 모드(IE7 모드)일때는 else if (ua.indexOf("MSIE 7") > -1) 이 구문으로 들어가서 제대로 작동을 안하네요.
    var ua = window.navigator.userAgent;

    if (ua.indexOf("MSIE") > -1) {
    var img_path = ""
    if (thisObj.value.indexOf("\\fakepath\\") < 0) {
    img_path = thisObj.value;

    } else {
    thisObj.select();
    var selectionRange = document.selection.createRange();
    img_path = selectionRange.text.toString();
    thisObj.blur();
    }
    preViewer.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fi" + "le://" + img_path + "', sizingMethod='scale')";

    } else {
    preViewer.innerHTML = "";
    var W = preViewer.offsetWidth;
    var H = preViewer.offsetHeight;
    . . . . . . . . . . .
    . . . . . . . . . . .
    . . . . . . . . . . .
    이렇게 수정하니 잘 됩니다.
    요약하면 IE8에서 호환성모드로 실행하게되면 user agent 문자열에서는 IE7로 찍혀나오지만 실제 동작(thisObj.value)는 fakepath를 반환하게 됩니다. 그래서 둘다 체크하도록 수정한것입니다.

    • 준용 2009/10/08 10:57 Modify/Delete

      jucke님 안녕하세요 !

      IE8의 호환성 모드를 생각못했네요..

      좋은 정보 감사합니다~수정하겠습니다~

     

    이 분께 감사할 따름이다.

    출처를 밝히면 퍼갈 수 있다길래

    출처 또한 잘 보이게 써 논다.

     

    PS : 저 소스 다 파헤쳐 주겠어 ㅡ_ㅡ;;

     

    출처 :

    http://junyong.pe.kr/98 - junyong's blog - http://junyong.pe.kr/

     

    혹시나 해서 닷넷 기본 컨드롤이 되는지

    테스트해 보았다.

     

    집PC 로

     

    하단의 예제는 출처에서 가져온 코드에

    말많고 탈많은

     

    <asp:FileUpload> 컨트롤과 <asp:Image> 컨트롤을 사용한 것이다.






    ================================


    출처 : http://cafe.naver.com/prjdev/145 (정말 감사합니다!!)


    //