The photo appears when you select it by an upload field

2

Colleagues.

I do not know if my title was clear, but I'm having trouble getting a user mode when I select the photo by the upload field, it appears under the upload field when it is selected, but without sending it to the server. this field will be at the beginning of the registration form.

I saw several examples that do almost this, but that to appear, first they send to the server with PHP and this is not what I want. Can you do that?

    
asked by anonymous 17.07.2017 / 17:57

1 answer

4

I found the problem interesting and found a solution in Stack Overflow in English. I'll steal and translate the response marked as correct in:

Preview an image before it is uploaded

You need some HTML something like this:

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

And now a bit of Javascript. I'll assume you use jQuery. Even if you do not use it, your code will not look that much different:

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 original response code in English, running in JSFiddle: link

    
17.07.2017 / 18:05