如何使用javascript顯示所有附件大小的總和？

Question

我有一個表單上傳文件。和腳本來顯示列表中的附件..

我想顯示所有附件大小的總和在文本輸入... 但只顯示最後的數據..

<form enctype="multipart/form-data" > 
<input type="file" name="file[]" id="files" multiple/> 
<input type="text" value="" id="all_size"> 
<div id="selectedFiles"></div> 
</form> 

這裏是腳本：

var selDiv = ""; 

document.addEventListener("DOMContentLoaded", init, false); 

function init() { 
    document.querySelector('#files').addEventListener('change', handleFileSelect, false); 
    selDiv = document.querySelector("#selectedFiles"); 
} 

function handleFileSelect(e) { 

    if(!e.target.files) return; 

    selDiv.innerHTML = ""; 


    var files = e.target.files; 
    for(var i=0; i<files.length; i++) { 
     var f = files[i]; 

     selDiv.innerHTML += "<span class='attach'>" + f.name + " <" + f.size + " bytes>" + "</span>"; 

     document.getElementById("all_size").value = f.size; 

    } 

} 

Answer 1

試試這個

function handleFileSelect(e) { 

    if(!e.target.files) return; 

    selDiv.innerHTML = ""; 

    var sum = 0; 
    var files = e.target.files; 
    for(var i=0; i<files.length; i++) { 
     sum += f.size; 
     var f = files[i]; 

     selDiv.innerHTML += "<span class='attach'>" + f.name + " <" + f.size + " bytes>" + "</span>"; 
    } 

    document.getElementById("all_size").value = sum; 

} 

Answer 2

試試這個

var selDiv = ""; 

document.addEventListener("DOMContentLoaded", init, false); 

function init() { 
    document.querySelector('#files').addEventListener('change', handleFileSelect, false); 
    selDiv = document.querySelector("#selectedFiles"); 
} 

function handleFileSelect(e) { 

    if(!e.target.files) return; 

    selDiv.innerHTML = ""; 


    var files = e.target.files; 
    var total_size = 0; 
    for(var i=0; i<files.length; i++) { 
     var f = files[i]; 
     total_size += f.size; 
     selDiv.innerHTML += "<span class='attach'>" + f.name + " <" + f.size + " bytes>" + "</span>"; 
     document.getElementById("all_size").value = total_size; 

    } 

}