반응형
SMALL
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>
<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 ! 끝 !
반응형
'Web Programing! > HTML / CSS' 카테고리의 다른 글
| [HTML] A 태그에서의 title속성 (0) | 2011.09.10 |
|---|---|
| [CSS] input박스 한/영 변환시키기 (0) | 2011.09.10 |
| [CSS] 테이블 크기 강제 고정 (0) | 2011.09.10 |
| [HTML] ie에서 html5 사용하기 (0) | 2011.09.10 |
| [CSS] ie6에서 img 태그 사용시 하단에 공백이 생길 경우 (0) | 2011.09.06 |
| [CSS] div사용시 공백제거 (0) | 2011.09.06 |
| [CSS] div안에서의 수직정렬 (0) | 2011.09.06 |
