본문 바로가기
개발/JavaScript

javascript 파일 업로드 사이즈 체크

by GetLight 2010. 9. 20.
<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>