Load image and insert into a DIV

Question

I have the following layout:

I would like when I click LOAD, open the explorer for me to choose the image and click next to the image, where there is a DIV, as happens on various websites.

Have some plugin for this?

Answer 1

There is no need for any plugin for this style, you can simply use the html input element that would be the following:

<input type=file id=teste>

You would soon have a button to select a file on your computer and could rescue the file path as follows, in javascript:

$('#teste').val();

Soon you can just set the src of its element <img> to the resulting file.

var img = $('#teste').val();
$('#id_sua_img').attr('src', img);

Obs:

This only works if it is local, if you want any user to upload a file from their own computer so that it is loaded into their application, then it would have to be uploaded to the server using php and then just use the upload destination path as src of the image

Answer 2

Hello, I use the components of Kendo UI, see their example here, but also has examples in W3schools. See the two that will help you.

Answer 3

You can use the class FileReader to read the dataurl of the image and play in the div, which in this example mine, is a tag <img>even

var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};

And the HTML code for that:

<img id="uploadPreview" style="width: 100px; height: 75px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">

function PreviewImage() {
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

    oFReader.onload = function (oFREvent) {
        document.getElementById("uploadPreview").src = oFREvent.target.result;
    };
};

So you will get a preview of your image.