jQuery multiple image preview with file name, file size and delete function for each image

Question

I'm using this awesome tutorial to preview multiple image before upload.

Now I need to put some information, file name & file size.

Below is the sample:

And the JS:

function previewImages()
{
    var preview = document.querySelector('.gallery');

    if(this.files)
    {
        [].forEach.call(this.files, readAndPreview);
    }

    function readAndPreview(file)
    {
        if (!/\.(jpe?g|png|gif)$/i.test(file.name))
        {
            return alert(file.name + " is not an image");
        }

        var reader = new FileReader();

        reader.addEventListener("load", function() {
          var image = new Image();
          image.width = 150;
          image.height = 150;
          image.title  = file.name;
          image.src    = this.result;

          preview.appendChild(image);
        });

        reader.readAsDataURL(file);

    }
}

document.querySelector('#uploadFile').addEventListener("change", previewImages);

HTML:

<span class="btn btn-default btn-file">
    Browse <input type="file" name="uploadFile" id="uploadFile" multiple="multiple"/>
</span>

<div class="gallery" style="display: flex; flex-wrap: wrap;"></div>

I know to get the file size and file name is using this: file.size & file.name.

But now how to put that information on my code?

And 1 more how to add delete button for each image and function to delete it?

C'mon, have a go! :-) 1) Find the element you want to update. The code you've shown does that with querySelector() right? 2) Insert the content you want. The code you have does that with appendChild, hmm doesn't sound quite right, check the docs, OK that's for HTML nodes, not plain text. Search for "javascript add content" turns up a simple answer. PS I don't see any jQuery here, remove that tag? — Don't Panic
– Don't Panic, Commented May 11, 2020 at 7:28

Don't Panic · Accepted Answer · 2020-05-13 03:07:59Z

I made some suggestions in a comment, but perhaps they weren't helpful. Here's a more complete answer.

Here's a simplified JSFiddle which adds some text under the image. I've just faked a placeholder image to simplify things and focus on the question you asked.

You really only need to do a few things:

1) Create an HTML element to hold your new text. If you don't add this, it won't style well under the <img>. You could add an empty container inside your gallery for text, but going by the name "gallery", it is intended for multiple pictures, so it doesn't make sense to add a bunch of empty placeholders.

You can create an element with (you could use any element of course):

var info = document.createElement("div");

2) Add text to that element. You can do that in several ways, maybe best is:

var text = document.createTextNode('your text');
info.appendChild(text)

3) Add your new element to the DOM, specifically after your new image:

preview.appendChild(info);

Putting it all together (JSFiddle), with some simplification:

var preview = document.querySelector('.gallery'),
    image    = new Image(),
    info     = document.createElement("div");

image.width  = 150;
image.height = 150;
image.title  = 'Foo Title';
image.src    = 'https://via.placeholder.com/150';

info.appendChild(document.createTextNode(image.title));
info.appendChild(document.createElement("br"));
info.appendChild(document.createTextNode(image.width + ' x ' + image.height + 'px'));

preview.appendChild(image);
preview.appendChild(info);

Collectives™ on Stack Overflow

jQuery multiple image preview with file name, file size and delete function for each image

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related