이미지 파일첨부시 업로드 이미지 미리보기 (IE8, Firefox 3)
로빈아빠
본문
IE8에서 이미지 업로드시 기존의 돌아다니는 소스들은 이미지 미리보기 기능이 동작하지 않았다
IE8에서는 file의 경로(obj.value)를 가져오면 실제 클라이언트의 경로대신
보안상의 이유로 'fakepath'라는 경로를 반환한다.
그래서 플래시업로드를 이용하면 가능한 방법들이 많다. (ex. http://code.google.com/p/swfupload/)
그러나 플래시를 이용하지 않고 방법이 없을까 하고 구글링 중에 찾은 포스팅이 있었다.
소스를 보니 IE8에서는 브라우저 클립보드를 이용해서 클라이언트경로를 가져오는 것이다 !
근데 클립보드를 사용하려면 클립보드를 엑세스한다는 창이 뜬다.
그래서 좀 더 괜찮은 방법이 없나 생각해서 좀 바꿔보았다.
SyntaxHighlighter에서 doctype과 html태그를 빼버려서 그냥 box로 ;;
기존 소스에서 클립보드부분을 다르게 바꿨다.(약간은 내 맘대로 수정 : )
문제가 있다면 삭제 하겠습니다.(트랙백 날립니다~)
테스트 한 브라우저는 일단 IE8, IE7, IE6, Firefox 3.5.2 ! 끝 !
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>
<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 ! 끝 !
관련링크
- http://junyong.tistory.com/98 1990회 연결
댓글목록
등록된 댓글이 없습니다.