Making read and preview code work with multiple files input

Question

I would like to have the images selected using the files input to appear under the input so that the user will have a visual cue about what he's going to upload. I've partially succeeded as my code does display the image, however, it displays only one image instead of all selected images.

I assume I'd need to use for loop and loop as many times as I have selected images in the input, however, I'm not sure how to get the amount of images into the select.

function displayInputImage(input) {
    var reader = new FileReader();
    var x = document.createElement("img");

    reader.onload = function(e) {
        x.setAttribute("src", e.target.result);
    }

    reader.readAsDataURL(input.files[0]);

    x.className = "new-avatar-picture";
    $('.upload-btn-wrapper').append(x);
}

$(".upload-input").change(function(){
    displayInputImage(this);
});

Quentin · Accepted Answer · 2018-12-06 10:58:26Z

1

From MDN:

The selected files' are returned by the element's HTMLInputElement.files property, which is a FileList object containing a list of File objects. The FileList behaves like an array, so you can check its length property to get the number of selected files.

answered Dec 6, 2018 at 10:58

community wiki

Quentin

Sign up to request clarification or add additional context in comments.

2 Comments

Onyx Over a year ago

I'm having trouble figuring out how to get the length without any examples on that website.

Quentin Over a year ago

The documentation says that HTMLInputElement.files has a length. You already have files, you can see it in your code input.files, so look at its length: input.files.length.

Collectives™ on Stack Overflow

Making read and preview code work with multiple files input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related