how to retrieve data length in console log

Question

how to get data length inside Files ? i need data length to make alert maximize file

I want to limit the maximum upload of image files by adding alerts to the following code

the alert is alert("You Have Reached The MAXIMUM Upload Limit"); so when I add one by one upload image to the specified limit, an alert will appear

i want to get data length after click upload one by one but the data length is always 0 why ?

html

<div class="files col-sm-4" id="files1">
                    <input type="file" name="files1" id="imageten" multiple />
                    <br />Selected files:
                    <ol class="fileList"></ol>
                </div>

script

$.fn.fileUploader = function (filesToUpload) {
    this.closest(".files").change(function (evt) {

        for (var i = 0; i < evt.target.files.length; i++) {
            filesToUpload.push(evt.target.files[i]);
        };
        var output = [];

        for (var i = 0, f; f = evt.target.files[i]; i++) {
            var removeLink = "<i class=\"fa fa-times fa-close removeFile\" href=\"#\" data-fileid=\"" + i + "\"></i>";
            output.push("<li><strong>", escape(f.name), "</strong> ", removeLink, " </li> ");
        }


        $(this).children(".fileList").append(output.join(""));
        console.log(evt.target.files);
    });
};

var filesToUpload = [];

$(document).on("click",".removeFile", function(e){
    e.preventDefault();
    var fileName = $(this).parent().children("strong").text();
    for(i = 0; i < filesToUpload.length; ++ i){
        if(filesToUpload[i].name == fileName){
            filesToUpload.splice(i, 1);
            console.log(filesToUpload);
        }
    }
    $(this).parent().remove();
});

With `data length` do you mean the `string.length` property with `string = filecontent`? Or the dimension of that file in `KB`/`MB`? — Dave, Mar 08 '19 at 08:13

Bruno Carneiro · Answer 1 · 2019-03-08T09:14:23.953

1

There is no variable named data in your code. I did not understood where you are returning 0. But, if my guess is correct, add this line inside $(document).on("click",".removeFile", function(e){

$(this).children(".fileList").append(output.join(""));
console.log(evt.target.files);

alert(evt.target.files.length); // add this line

edited Mar 08 '19 at 09:14

answered Mar 08 '19 at 08:23

Bruno Carneiro

401
3
14

thanks, but i still understand i edit my questin for you – Kiki Olivia Mar 08 '19 at 08:59
@KikiOlivia I changed my answer. Take a look at it. – Bruno Carneiro Mar 08 '19 at 09:14

score 0 · Answer 2 · answered Mar 08 '19 at 08:14

$("#fileinput")[0].files.length will give the number of files.

if($("#fileinput")[0].files.length > 2) {
  alert("You can select only 2 files");
}

Let me know if this is helpful.

How to limit the maximum files chosen when using multiple file input - There are already questions like this on stackoverflow.

how to retrieve data length in console log

2 Answers2