如何通過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

使用下面的代碼，它會提醒fil e大小，文件加載時

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文件的屬性。