이미지 업로드 전 클라이언트 경로를 통한 미리보기

IE 7.0 이상의 버젼과 FireFox 3.0 이상의 버젼에서는 파일 업로드시 이미지 미리보기 스크립트를 이전과 같이 짜면 하나도 보이지 않는다.

물론 서버에 업로드 된 이미지 경로를 따서 보여주는 방식도 있지만
클라이언트의 JavaScript 만으로 해결하고자 하는 나같은 사람도 있기때문에
구글링을 열심히 하고 노하우를 축적하여 함수를 만들어내게 되었다.

IE 8.0 의 경우를 포함해봤는데,
objFile.Value 값이 'C:\fakepath\파일경로' 이므로 클립보드를 이용한 편법을 쓴다.
귀찮은점 한가지로 페이지 로딩한번에 한번씩 '클립보드 엑세스를 허용하시겠습니까?' 라고 물어온다.
귀찮지 않게 쓰려면
제어판 > 인터넷 옵션 > 보안 > 사용자 지정 수준 > 스크립팅 > 프로그램 클립보드 액세스 허용 : 사용
이 되어 있어야 한다. 물론 보안상으론 안좋아진다는것은 염두해두자.

오페라 브라우저의 경우 File 필드의 경로 값이 fake_path 로 온다고 되어있던데, 나중에 작업 예정.

view source

print?

01.<STYLE type=text/css>

02.    .preview { width: 70px; height: 70px; text-align: center; border:1px solid silver; }

03.</STYLE>

04.  

05.<INPUT id=fileData type=file accept=image/jpg onchange="fileUpPreview(this, document.getElementById('nf_preview'));" name=fileData>

06.<DIV class=preview id=preview title="이미지 미리보기"></DIV>

07.  

08.<SCRIPT type=text/javascript>//<![CDATA[

09./* 파일 업로드 전 이미지 미리보기

10.  

11.07. 03. 2008 Yeon Jun Kwak

12.03. 30. 2009 2차수정

13.*/

14.// 파일 업로드 전 이미지 미리보기

15.function fileUpPreview(objFile, previewer) {

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

17.  

18.    // 브라우저별 처리

19.  

20.    // IE 8 이면

21.    if (objFile.value.indexOf("fakepath") != -1) {

22.        objFile.activate();

23.        document.execCommand('Copy');

24.        previewer.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file://" + String(window.clipboardData.getData('Text')) +"', sizingMethod='scale')";

25.        return;

26.    }

27.    // IE 7 이면

28.    if (window.navigator.userAgent.indexOf("MSIE 7") != -1) {

29.        previewer.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file://" + String(objFile.value) +"', sizingMethod='scale')";

30.        return;

31.    }

32.    // ie 7 이 아닌 브라우저이면

33.    else {

34.        previewer.innerHTML = "";

35.        var W = previewer.offsetWidth;

36.        var H = previewer.offsetHeight;

37.        //var tmpImage = new Image();

38.        var tmpImage = document.createElement( 'img' );

39.        previewer.appendChild(tmpImage);

40.  

41.        tmpImage.onerror = function () {

42.            //alert("이미지 미리보기 생성중 오류발생.");

43.            return previewer.innerHTML = "";

44.        }

45.  

46.        tmpImage.onload = function () {

47.            if (this.width > W) {

48.                this.height = this.height / (this.width / W);

49.                this.width = W;

50.            }

51.            if (this.height > H) {

52.                this.width = this.width / (this.height / H);

53.                this.height = H;

54.            }

55.        }

56.  

57.        if (window.navigator.userAgent.indexOf("Firefox/3") != -1) {    // firefox3 이면

58.            var picData = objFile.files.item(0).getAsDataURL();

59.            tmpImage.src = 'data:' + picData;

60.            tmpImage.writeAttribute("title", "ImageSize: "+ objFile.files.item(0).fileSize +" byte");

61.        } else {

62.            tmpImage.src = "file://" + objFile.value;

63.        }

64.    }

65.}

66.//]]></SCRIPT>