Return two image spans from file input

Question

I have the following piece of JavaScript:

    <script>
    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function(theFile) {
                return function(e) {
                    // Render thumbnail.
                    var span = document.createElement('span');
                    span.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
                    document.getElementById('list').insertBefore(span, null);
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

The EventListener at the bottom line is Listening to an input file HTML element. When a file is selected the handeFileSelect function does the rest. Right now it returns the span into my 'list'. What I want is to make another list, which doesn't have to have the same id, but it needs to be filled exactly like the other list. How can I do this?

Not sure I understand. Just create another span, and insert it before `list2`. — Barmar, May 16 '16 at 20:53
Inside the return function? Tried this but it made it appear only in one of the two lists. — JKL, May 16 '16 at 20:59

Barmar · Accepted Answer · 2016-05-17T20:02:18.663

1

I think you should just need to repeat the code that adds the image so it adds to the second list.

        reader.onload = (function(theFile) {
            return function(e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('list').insertBefore(span, null);
                var span2 = document.createElement('span');
                span2.innerHTML = ['<img class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('list2').insertBefore(span2, null);
            };
        })(f);

DEMO

edited May 17 '16 at 20:02

answered May 16 '16 at 21:01

Barmar

741,623
53
500
612

I tried this but it makes the images only appear in the last given list. So in this case the images will only be shown in list2. I my problem by making a recursive function which in my eyes is a very ugly solution. I am now at work and not able to share my code with you but I'll update you when I get home. – JKL May 17 '16 at 09:27
I don't see how appending two different spans and inserting them in two different lists can result in just one image being shown, unless you have CSS that's hiding one of them. Can you make a jsfiddle that demonstrates the problem? – Barmar May 17 '16 at 14:32
Hello Barmar, you can find the JsFiddle here: https://jsfiddle.net/ohs25kpx/2/. I included your solution, probably I am overlooking something.. – JKL May 17 '16 at 19:28
I had a typo, the second `insertBefore` should insert `span2`, not `span`. – Barmar May 17 '16 at 20:02
I can't believe I have overseen this myself. Have tried numerous options like yours but they all didn't work. Thanks a lot Barmar! – JKL May 17 '16 at 20:44
See http://stackoverflow.com/questions/19301122/hidden-file-input-does-not-retain-value-on-submit – Barmar May 18 '16 at 20:15

Return two image spans from file input

1 Answers1