JavaScriptを使用して画像サイズをアップロードするにはどうすればよいですか？

Question

私はjavascriptを経由してアップロードした画像のサイズを取得したいが、私はできません

HTML

<form> 
    <input type="file" id="img" multiple> 
</form> 

JS

var imageData = function(files) { 

    var imgWidth = 0, 
     imgHeight = 0; 

    var reader = new FileReader(); 

    reader.addEventListener('load',function(theFile) { 

    var img = new Image(); 
    img.src = theFile.target.result; 

    img.addEventListener('load',function(){ 

     return { 
     imgWidth :this.width, 
     imgHeight :this.height 
     }; 

    }); 

    }); 

    reader.readAsDataURL(files); 
}; 

function checkImg() { 
    var files = imgs.files; 

    for (var i = 0; i < files.length; i++){ 
    console.log(imageData(files[i]).imgWidth); 
    } 
} 

var imgs = document.getElementById('img'); 

imgs.addEventListener('change',checkImg); 

http://jsbin.com/tuqoguwudo/3/edit?html,js,console,output

Answer 1

次のコードを使用すると、ファイルに警告しますファイルがロードされるときのサイズ

var imageData = function(files) { 

    var imgWidth = 0, 
     imgHeight = 0; 

    var reader = new FileReader(); 

    reader.addEventListener('load',function(theFile) { 

    var img = new Image(); 
    img.src = theFile.target.result; 
    alert(theFile.total); 
    img.addEventListener('load',function(){ 

     return { 
     imgWidth :this.width, 
     imgHeight :this.height 
     }; 

    }); 

    }); 

    reader.readAsDataURL(files); 
}; 

function checkImg() { 
    var files = imgs.files; 

    for (var i = 0; i < files.length; i++){ 
    console.log(imageData(files[i]).imgWidth); 
    } 
} 

var imgs = document.getElementById('img'); 

imgs.addEventListener('change',checkImg); 

このファイルの属性は.totalである必要があります。