The photo appears when selecting it by an upload field

Asked

Viewed 221 times

2

Colleagues.

I don’t know if my title was clear, but I’m having a hard time getting a user mode by selecting the photo by the upload field, it will appear under the upload field when selected, but without sending to the server, because this field will be right at the beginning of the registration form.

I saw several examples that do almost that, but to appear, first they send to the server with PHP and that’s not what I want. You can do it?

jquery
  • 2

    Yes, it is fully possible. Please see this example: http://jsfiddle.net/LvsYc/. Unfortunately, I am running out of time to write a reply.

1 answer

4


I found the problem interesting and found a solution in Stack Overflow in English. I will steal and translate the answer marked as correct in:

Preview an image before it is uploaded

You need some sort of HTML like this:

<form id="form1">
    <input type="file" id="fileUpload" />
    <img id="imagem" src="#" alt="Preview da sua imagem" />
</form>

And now a little Javascript. I’ll assume that you use jQuery. Even if you don’t use it, your code won’t look very different from this:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $("#imagem").attr('src', e.target.result);
        }     
        reader.readAsDataURL(input.files[0]);
    }
}

$("#fileUpload").change(function(){
    readURL(this);
});

Here is an example of the code of the original English response running on Jsfiddle: http://jsfiddle.net/LvsYc/

  • Thank you all!

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.