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

프로그래밍/JavaScript

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

백룡화검 2009. 6. 4. 12:03

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

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

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

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

<STYLE 
type=text/css> 
    .preview { width: 70px; 
height: 70px; text-align: center; border:1px solid silver; } 
</STYLE> 
  
<INPUT 
id=fileData type=file accept=image/jpg onchange="fileUpPreview(this, 
document.getElementById('nf_preview'));" name=fileData> 
<DIV 
class=preview id=preview 
title="이미지 미리보기"></DIV> 
  
<SCRIPT 
type=text/javascript>//<![CDATA[ 
/* 파일 업로드 전 
이미지 미리보기 
  
07. 03. 
Yeon Jun Kwak 
03. 30. 
2차수정 
*/
// 파일 업로드 전 
이미지 미리보기 
function fileUpPreview(objFile, 
previewer) { 
    if(!/(\.gif|\.jpg|\.jpeg|\.png)$/i.test(objFile.value)) { 
alert("이미지 형식의 파일을 선택하십시오"); 
return; } 
  
    // 브라우저별 처리 
  
    // IE 8 이면 
    if (objFile.value.indexOf("fakepath") != -1) { 
        objFile.activate(); 
        document.execCommand('Copy'); 
        previewer.style.filter = 
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file://" + 
String(window.clipboardData.getData('Text')) 
+"', sizingMethod='scale')"; 
        return; 
    } 
    // IE 7 이면 
    if (window.navigator.userAgent.indexOf("MSIE 
7") != -1) { 
        previewer.style.filter = 
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file://" + String(objFile.value) 
+"', sizingMethod='scale')"; 
        return; 
    } 
    // ie 7 이 아닌 브라우저이면 
    else { 
        previewer.innerHTML = 
""; 
        var W = previewer.offsetWidth; 
        var H = previewer.offsetHeight; 
        //var tmpImage = new 
Image(); 
        var tmpImage = document.createElement( 'img' ); 
        previewer.appendChild(tmpImage); 
  
        tmpImage.onerror = 
function () { 
            //alert("이미지 미리보기 생성중 
오류발생."); 
            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 (window.navigator.userAgent.indexOf("Firefox/3") != -1) {    // firefox3 이면 
            var picData = objFile.files.item(0).getAsDataURL(); 
            tmpImage.src = 
'data:' + picData; 
            tmpImage.writeAttribute("title", "ImageSize: "+ 
objFile.files.item(0).fileSize +" byte"); 
        } else { 
            tmpImage.src = 
"file://" + objFile.value; 
        } 
    } 
} 
//]]></SCRIPT>