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](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild), OK that's for HTML nodes, not plain text. Search for "javascript add content" turns up a [simple answer](https://stackoverflow.com/questions/13495010/how-to-add-content-to-html-body-using-js). PS I don't see any jQuery here, remove that tag? — Don't Panic, May 11 '20 at 07:28

Don't Panic · Answer 1 · 2020-05-13T03:07:59.950

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);

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

1 Answers1