Получить размер файла от загрузки нескольких файлов

Question

У меня есть этот код ниже

$("#btn_save_development").bind("click", function() { 


    var devMainImgSize = parseFloat($("#dev_main_image")[0].files[0].size/1024).toFixed(2); 
    var devListingImg1Size = parseFloat($("#devListingImg1")[0].files[0].size/1024).toFixed(2); 
    var devListingImg2Size = parseFloat($("#devListingImg2")[0].files[0].size/1024).toFixed(2); 
    var devListingImg3Size = parseFloat($("#devListingImg3")[0].files[0].size/1024).toFixed(2); 
    var devListingImg4Size = parseFloat($("#devListingImg4")[0].files[0].size/1024).toFixed(2); 
    var devListingImg5Size = parseFloat($("#devListingImg5")[0].files[0].size/1024).toFixed(2); 
    var devListingImg6Size = parseFloat($("#devListingImg6")[0].files[0].size/1024).toFixed(2); 

    if(devMainImgSize > 800) 
    { 
     alert("The Main Listing Image too large. It should not be above 800KB. Please upload an image with a smaller size"); 
     return false; 
    } 

    if (devListingImg1Size > 800 || devListingImg2Size > 800 || devListingImg3Size > 800 || devListingImg4Size > 800 || devListingImg5Size > 800 || devListingImg6Size > 800) { 
     alert("One or all of the Development Listing Image(s) is above 800KB. Please ensure none of the development listing images are larger than 800KB"); 
     return false; 
    } 
}); 

, который я хочу использовать, чтобы проверить размер изображения, загруженные с помощью загрузки файлов. Проблема, с которой я сталкиваюсь, заключается в том, что если я попытаюсь проверить размер файла только в одном файле, загрузите код, и я вижу предупреждение Javascript, но когда я пытаюсь проверить несколько файлов, я получаю эту ошибку в консоли своего браузера Uncaught TypeError: Cannot read property 'size' of undefined. Мой вопрос: как я могу проверить размеры файлов для всех файлов в моих файлах? Заранее спасибо

Answer 1

Проблема в том, что если у вас нет всех загрузок input, заполненных изображением, тогда эта ошибка будет выбрасываться. Если вы их заполняете, ошибка не произойдет. Вы можете создать функцию, которая проверяет, заполнены ли входы. Затем, если они не заполнены, введите значение 0. В противном случае верните размер для остальных вычислений, которые вы выполняете.

Смотрите скрипку: https://jsfiddle.net/3xLLjko9/3/

$("#btn_save_development").bind("click", function() { 

    var devMainImgSize = parseFloat(checkFilled($("#dev_main_image"))/1024).toFixed(2); 
    var devListingImg1Size = parseFloat(checkFilled($("#devListingImg1"))/1024).toFixed(2); 
    var devListingImg2Size = parseFloat(checkFilled($("#devListingImg2"))/1024).toFixed(2); 
    var devListingImg3Size = parseFloat(checkFilled($("#devListingImg3"))/1024).toFixed(2); 
    var devListingImg4Size = parseFloat(checkFilled($("#devListingImg4"))/1024).toFixed(2); 
    var devListingImg5Size = parseFloat(checkFilled($("#devListingImg5"))/1024).toFixed(2); 
    var devListingImg6Size = parseFloat(checkFilled($("#devListingImg6"))/1024).toFixed(2); 

    //FOR TESTING PURPOSES 
    console.log(devMainImgSize); 
    console.log(devListingImg1Size); 
    console.log(devListingImg2Size); 
    console.log(devListingImg3Size); 
    console.log(devListingImg4Size); 
    console.log(devListingImg5Size); 
    console.log(devListingImg6Size); 

    if(devMainImgSize > 800) 
    { 
     alert("The Main Listing Image too large. It should not be above 800KB. Please upload an image with a smaller size"); 
     return false; 
    } 

    if (devListingImg1Size > 800 || devListingImg2Size > 800 || devListingImg3Size > 800 || devListingImg4Size > 800 || devListingImg5Size > 800 || devListingImg6Size > 800) { 
     alert("One or all of the Development Listing Image(s) is above 800KB. Please ensure none of the development listing images are larger than 800KB"); 
     return false; 
    } 
}); 

function checkFilled(ele){ 
    if(ele[0].files.length > 0){ 
    return ele[0].files[0].size; 
    } else { 
    return 0; 
    } 
} 

Answer 2

Другой подход может быть для проверки файлов, как пользователь выбирает их. Вы можете выполнить это, прослушивая изменения на входе.

$("#fileInput").on("change", processFiles); 

var processFiles = function(event) { 
    var files = event.target.files; 
    //Loop through our files 
    for (var i = 0; i < files.length; i += 1) { 
    var file = files[i]; 
    if(file.size/1024 > 800){ 
      alert("file too big!"); 
    } 
    //Build the File Info HTML 
    var fileInfo = ["<li>", 
        file.name, 
        "<span>", 
        file.size/1024, 
        " kb</span>", 
        "</li>"].join(''); 
    $("#list").append(fileInfo); 
    reader.onload = loaded; 
    reader.readAsDataURL(file); 
    } 
}; 

Вот рабочий fiddle.