자바스크립트(javascript) 파일업로드 이미지 미리보기

자바스크립트(javascript) 파일업로드 시 이미지 미리보기 기능

(javascript image preview before upload)

아래 소스 중 IE일때 미리보기 기능은 IE8 이하에서만 적용이됩니다.

IE9, IE10에서는 작동을 하지 않고 액세스가 거부되었습니다. 라는 에러가 발생합니다.

MS에서 보안적인 이유로 createRange()를 사용 중지시켜 IE9나 IE10에서는 작동하지 않습니다.

IE9이상 버전에서 미리보기를 구현하려할 때 아래의 소스는 버전별 호환성에 적합하지 않으므로

다른 방법으로 개발하시길 추천합니다.

<script language="javascript">

<!--

function previewImage(targetObj, View_area) {

var preview = document.getElementById(View_area); //div id

var ua = window.navigator.userAgent;

  //ie일때(IE8 이하에서만 작동)

if (ua.indexOf("MSIE") > -1) {

targetObj.select();

try {

var src = document.selection.createRange().text; // get file full path(IE9, IE10에서 사용 불가)

var ie_preview_error = document.getElementById("ie_preview_error_" + View_area);

if (ie_preview_error) {

preview.removeChild(ie_preview_error); //error가 있으면 delete

}

var img = document.getElementById(View_area); //이미지가 뿌려질 곳

//이미지 로딩, sizingMethod는 div에 맞춰서 사이즈를 자동조절 하는 역할

img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='scale')";

} catch (e) {

if (!document.getElementById("ie_preview_error_" + View_area)) {

var info = document.createElement("<p>");

info.id = "ie_preview_error_" + View_area;

info.innerHTML = e.name;

preview.insertBefore(info, null);

}

}

  //ie가 아닐때(크롬, 사파리, FF)

} else {

var files = targetObj.files;

for ( var i = 0; i < files.length; i++) {

var file = files[i];

var imageType = /image.*/; //이미지 파일일경우만.. 뿌려준다.

if (!file.type.match(imageType))

continue;

var prevImg = document.getElementById("prev_" + View_area); //이전에 미리보기가 있다면 삭제

if (prevImg) {

preview.removeChild(prevImg);

}

var img = document.createElement("img"); 

img.id = "prev_" + View_area;

img.classList.add("obj");

img.file = file;

img.style.width = '100px'; 

img.style.height = '100px';

preview.appendChild(img);

if (window.FileReader) { // FireFox, Chrome, Opera 확인.

var reader = new FileReader();

reader.onloadend = (function(aImg) {

return function(e) {

aImg.src = e.target.result;

};

})(img);

reader.readAsDataURL(file);

} else { // safari is not supported FileReader

//alert('not supported FileReader');

if (!document.getElementById("sfr_preview_error_"

+ View_area)) {

var info = document.createElement("p");

info.id = "sfr_preview_error_" + View_area;

info.innerHTML = "not supported FileReader";

preview.insertBefore(info, null);

}

}

}

}

}

//-->

</script>

<input type="file" name="profile_pt" id="profile_pt" onchange="previewImage(this,'View_area')">

<div id='View_area' style='position:relative; width: 100px; height: 100px; color: black; border: 0px solid black; dispaly: inline; '></div>

실행화면