How to show and upload images with javascript in asp.net?

Question

I don't known how to show images and upload with Javascript, don't use ( input type file of html , control fileupload asp.net ) . I want to use as follow

#img{width:100px;height:100px;}
<div id="img"></div>
<button type="button" id="bt_image">Image</button>
<button type="button" id="bt_save">Save</button>

When I click button Image , show dialog choose file, choose file image and the image will show on div img, click button Save , this upload in server. Thank you.

Answer 1

Try this example - there's an upload button, and a preview area, all you need to add is the upload button.

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

And the js:

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

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

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

Answer 2

Javascript version

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();    
        reader.onload = function (e) {document.querySelector('#blah').attr('src', e.target.result);}  
        reader.readAsDataURL(input.files[0]);
    }
}   
document.querySelector("#imgInp").change(function(){readURL(this);});