There is no need for any plugin for this feature, you can simply use the html input element which would be as follows:

<input type=file id=teste>

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

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

So you can just set the src of your <img> element to the resulting file.

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

Note:

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

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

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

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 this:

<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'll get a preview of your image.