Preview image HTML & JavaScript

Question

I am working on an image uploader and I am currently trying to build up an image preview before the upload is done. I have this HTML code:

<input type="file" id="id_imatgeNewPeces"></input><br></br>
<img id="previewing" src="" />

Then I add a listener to the input like this:

document.getElementById('id_imatgeNewPeces').addEventListener('change', this.handleFileSelect, false);

And finally the function handleFileSelect:

handleFileSelect: function(oEvent) {
    var file = oEvent.target.files[0];

    if (!file.type.match('image.*')) {
        sap.m.MessageToast.show("El archivo seleccionado no es una Imagen");
    } else {

        var readerURL = new FileReader();

        readerURL.onload = function() {
            $('#previewing').attr('src', readerURL.result);
            $('#previewing').attr('width', '250px');
            $('#previewing').attr('height', '230px');
            return true;
        };

        readerURL.readAsDataURL(file);
    }
},

I don't know why when I select a file which is not an image it displays the message but when I do select an image when the method onload ends no image is displayed and in addition it seems that the listener has been lost because no further calls are done when if I select another image.

The funny thing is that if I place a breakpoint on line '$('#previewing').attr('height', '230px');' I can see the image but when I continue it disappears. In addition when the method onload ends the fileinput "resets" I mean that it says that it has no selected files.

@MauricePerry's jsfiddle works for me. And as a side-note your HTML is not valid: The input and the br elements are self-closing just like img, and should be <input type="file" id="id_imatgeNewPeces"><br> — Niklas Brunberg
– Niklas Brunberg, Commented May 26, 2015 at 8:25

Matheus Cuba · Accepted Answer · 2018-04-18 17:39:03Z

Besides being a old question, I've found that your code is working as expected:

I just don't undestand why use a native addEventListener() when you are using jquery for DOM manipulation, being easily replaced by:

$("#id_imatgeNewPeces").change(handleFileSelect);

var handleFileSelect = function(oEvent) {
    var file = oEvent.target.files[0];

    if (!file.type.match('image.*')) {
        console.log("El archivo seleccionado no es una Imagen");
    } else {

        var readerURL = new FileReader();

        readerURL.onload = function() {
            $('#previewing').attr('src', readerURL.result);
            $('#previewing').attr('width', '250px');
            $('#previewing').attr('height', '230px');
            return true;
        };

        readerURL.readAsDataURL(file);
    }
};

$("#id_imatgeNewPeces").change(handleFileSelect);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="id_imatgeNewPeces">
<br/><br/>
<img id="previewing" src="" />

Collectives™ on Stack Overflow

Preview image HTML & JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related