Upload von mehreren Dateien

Question

Ich habe diesen Code unter

$("#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; 
    } 
}); 

, die ich mag, um die Größe der Bilder zu überprüfen, über die das Hochladen von Dateien hochgeladen werden. Das Problem, das ich habe, ist, wenn ich versuche, die Größe der Datei in nur einer Datei zu überprüfen upload der Code funktioniert und ich sehe die Javascript-Warnung, aber wenn ich versuche, für mehrere Dateien zu überprüfen, bekomme ich diesen Fehler in meiner Browser-Konsole Uncaught TypeError: Cannot read property 'size' of undefined. Meine Frage ist, wie kann ich die Dateigröße aller Dateien in meinen Dateiuploads überprüfen? Vielen Dank im Voraus

Answer 1

Das Problem ist, dass, wenn Sie nicht alle input Uploads mit einem Bild gefüllt haben, wird dieser Fehler ausgelöst. Wenn Sie alle füllen, wird der Fehler nicht auftreten. Sie können eine Funktion anlegen, die prüft, ob die Eingaben gefüllt sind. Wenn sie nicht gefüllt sind, geben Sie einen Wert von 0 zurück. Andernfalls geben Sie die Größe für den Rest der von Ihnen durchgeführten Berechnungen zurück.

Siehe Geige: 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

Ein weiterer Ansatz, um die Dateien zu validieren sein könnte, wenn der Benutzer sie auswählt. Sie können dies erreichen, indem Sie auf Änderungen an der Eingabe achten.

$("#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); 
    } 
}; 

Hier ist ein funktionierendes fiddle.