이미지 업로드전 미리보기(초간단)
컨텐츠 정보
- 21,094 조회
- 4 추천
- 목록
본문
안녕하세요. 초보수련생입니다. 오랜만에 여기에 글을 올리는군요.
오늘은 이미지를 원격으로 업로드를 하는 경우에 업로드를 하기 전에 미리보는 초간단 코드를 올립니다. 코드가 아니라 스크립트로 되어있는데요. 여기에 올라와 있는 미리보기라는 것들이 이것을 말하는 것인지는 모르겠지만 제가 만든 것에 비하면 엄청나게 복잡하더군요. 그래서 제가 언제나 그렇듯 저와 같은 초보님들을 위해서 올립니다.
---------------이미지 업로드전 미리보기 코드------------------
<script language="JavaScript">
<!--
function view(va){
eval("view1.src = va");
}
//-->
</script>
<FORM METHOD=POST ACTION="" enctype="multipart/form-data">
<input type="file" name="0" onChange="view(this.value)"><br>
</FORM>
<img id="view1" src="">
----------------------------------------
이상입니다....허접하죠? 그래도 잼나는 방법인것 같아서 올립니다. 저는 이거 하기 전까지 사실 안되는줄 알았던게 뭐냐하면 원격지에 올라가 있는 코드에서 업로드를 할 때 로컬로 경로지정이 안 될줄 알았거든요. 그런데 그냥 해봤는데 아무 무리없이 되는 것이었습니다.
이것이 무슨 말인고하니 이것이 있는 파일이 자신의 컴이 아닌 서버에 있는 파일인데도 로컬로의 경로지정이 된다는 말입니다. 이미 고수분들은 알고계셨겠지만...^^;
또 하나 안해봐서 몰랐던게 input 태그 타입이 파일일 때 이벤트를 먹여본 적이 없었기 때문에 정말로 긴가민가했습니다. 그런데 이것도 잘 되었습니다. 더구나 안에 있는 값까지 보낼 수 있었다니...^^;
결국 이리하여 스크립트로 미리보기가 만들어진 것입니다. 이 파일이 집에 있는 자신의 컴에서 돌리는 것이라면 엄청 평범한 것이지만 원격지에 있어도 된다는 것을 모르시는 분들을 위해서 알려드리고 싶었습니다.
그럼 이만...
-------------------------------------------------------------------
거친마루 dom 표준 준수라면..
function view(va) {
document.getElementById("view1").setAttribute('src',va);
}
기왕이면 : )
-------------------------------------------------------------------
karkata 이미지 가로, 세로 제한거는 것인데,, 잘 될지 모르겠네요.
일단 저는 잘 됩니다만, 아마 익스용이겠죠?
<HEAD>
<SCRIPT language="Javascript">
var limitedImgWidth = 50; // Limited width of a image
var limitedImgHeight = 50; // Limited height of a image
function isValid(oImg) {
try {
oImg.style.display = "inline";
if ((oImg.width > 0 && oImg.width <= limitedImgWidth) &&
(oImg.height > 0 && oImg.height <= limitedImgHeight)) return true;
else throw new Object("error");
} catch (e) {
oImg.style.display = "none";
alert(e + "\\r\\n" + "Illegal image object!");
}
return false;
}
function setNewImg(oElement) {
var oImg = document.getElementById("previewImg");
if (oElement.value != "") oImg.setAttribute("src", oElement.value);
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="previewImg" align="absmiddle" style="display:none" border="0"
onLoad="isValid(this);" onError="alert('Not image');">
<INPUT type="file" name="upImgPath" onChange="setNewImg(this);">
</BODY>
</HTML>
오늘은 이미지를 원격으로 업로드를 하는 경우에 업로드를 하기 전에 미리보는 초간단 코드를 올립니다. 코드가 아니라 스크립트로 되어있는데요. 여기에 올라와 있는 미리보기라는 것들이 이것을 말하는 것인지는 모르겠지만 제가 만든 것에 비하면 엄청나게 복잡하더군요. 그래서 제가 언제나 그렇듯 저와 같은 초보님들을 위해서 올립니다.
---------------이미지 업로드전 미리보기 코드------------------
<script language="JavaScript">
<!--
function view(va){
eval("view1.src = va");
}
//-->
</script>
<FORM METHOD=POST ACTION="" enctype="multipart/form-data">
<input type="file" name="0" onChange="view(this.value)"><br>
</FORM>
<img id="view1" src="">
----------------------------------------
이상입니다....허접하죠? 그래도 잼나는 방법인것 같아서 올립니다. 저는 이거 하기 전까지 사실 안되는줄 알았던게 뭐냐하면 원격지에 올라가 있는 코드에서 업로드를 할 때 로컬로 경로지정이 안 될줄 알았거든요. 그런데 그냥 해봤는데 아무 무리없이 되는 것이었습니다.
이것이 무슨 말인고하니 이것이 있는 파일이 자신의 컴이 아닌 서버에 있는 파일인데도 로컬로의 경로지정이 된다는 말입니다. 이미 고수분들은 알고계셨겠지만...^^;
또 하나 안해봐서 몰랐던게 input 태그 타입이 파일일 때 이벤트를 먹여본 적이 없었기 때문에 정말로 긴가민가했습니다. 그런데 이것도 잘 되었습니다. 더구나 안에 있는 값까지 보낼 수 있었다니...^^;
결국 이리하여 스크립트로 미리보기가 만들어진 것입니다. 이 파일이 집에 있는 자신의 컴에서 돌리는 것이라면 엄청 평범한 것이지만 원격지에 있어도 된다는 것을 모르시는 분들을 위해서 알려드리고 싶었습니다.
그럼 이만...
-------------------------------------------------------------------
거친마루 dom 표준 준수라면..
function view(va) {
document.getElementById("view1").setAttribute('src',va);
}
기왕이면 : )
-------------------------------------------------------------------
karkata 이미지 가로, 세로 제한거는 것인데,, 잘 될지 모르겠네요.
일단 저는 잘 됩니다만, 아마 익스용이겠죠?
<HEAD>
<SCRIPT language="Javascript">
var limitedImgWidth = 50; // Limited width of a image
var limitedImgHeight = 50; // Limited height of a image
function isValid(oImg) {
try {
oImg.style.display = "inline";
if ((oImg.width > 0 && oImg.width <= limitedImgWidth) &&
(oImg.height > 0 && oImg.height <= limitedImgHeight)) return true;
else throw new Object("error");
} catch (e) {
oImg.style.display = "none";
alert(e + "\\r\\n" + "Illegal image object!");
}
return false;
}
function setNewImg(oElement) {
var oImg = document.getElementById("previewImg");
if (oElement.value != "") oImg.setAttribute("src", oElement.value);
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="previewImg" align="absmiddle" style="display:none" border="0"
onLoad="isValid(this);" onError="alert('Not image');">
<INPUT type="file" name="upImgPath" onChange="setNewImg(this);">
</BODY>
</HTML>
관련자료
-
링크
댓글 0
등록된 댓글이 없습니다.
