<input type="file">에서 전달되는 이미지 크기를 JavaScript로 확인하는 코드가 있어 옮겨둔다.
Firefox 3.0 이상과 IE에서 동작된다.
<script type="text/javascript">
function inputFileOnChange(source) {
var v_console = '';
if(document.getElementById('my-file').files) { // above Firefox V.3
// Support: nsIDOMFile, nsIDOMFileList
v_console = "fileSize: " + document.getElementById('my-file').files.item(0).fileSize;
document.getElementById('console').innerHTML = v_console;
}else{ // for IE
image = new Image();
image.src = "file:///" + source.value;
window.setTimeout("readDetails()", 100);
document.getElementById('img').innerHTML = "<img src=\""+image.src+"\"
alt=\"\" id=\"loadable\">";
}
};
function readDetails(){
var details = {fSize:image.fileSize, h:image.height, w:image.width};
document.getElementById('console').innerHTML = "fileSize: "+details["fSize"];
}
</script>
<div>
<input type="file" name="my-file" id="my-file" onchange="inputFileOnChange(this);" />
<br /><br />
<code id="console">...console...</code>
<div id="img"></img>
</div>
Firefox 3.0 이상과 IE에서 동작된다.
<script type="text/javascript">
function inputFileOnChange(source) {
var v_console = '';
if(document.getElementById('my-file').files) { // above Firefox V.3
// Support: nsIDOMFile, nsIDOMFileList
v_console = "fileSize: " + document.getElementById('my-file').files.item(0).fileSize;
document.getElementById('console').innerHTML = v_console;
}else{ // for IE
image = new Image();
image.src = "file:///" + source.value;
window.setTimeout("readDetails()", 100);
document.getElementById('img').innerHTML = "<img src=\""+image.src+"\"
alt=\"\" id=\"loadable\">";
}
};
function readDetails(){
var details = {fSize:image.fileSize, h:image.height, w:image.width};
document.getElementById('console').innerHTML = "fileSize: "+details["fSize"];
}
</script>
<div>
<input type="file" name="my-file" id="my-file" onchange="inputFileOnChange(this);" />
<br /><br />
<code id="console">...console...</code>
<div id="img"></img>
</div>
'개발 > JavaScript' 카테고리의 다른 글
onload, DOMContentLoaded, onreadystatechange, defer, jQuery ready 페이지 로드 테스트 (0) | 2011.05.27 |
---|---|
이 페이지에서 뒤로가기 하거나, 창을 닫을 때 그리고 새로고침을 할때 확인창이 뜹니다. (0) | 2011.04.07 |
자바스크립트 객체(?)처럼 사용하기 (0) | 2010.07.28 |
Javascript DOM Operation Examples (0) | 2010.06.10 |
input box 언어설정, (0) | 2010.05.06 |