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.

I don't think you'd get anything else but close votes unless you post your code you have been trying! — lshettyl
– lshettyl, Commented Aug 9, 2015 at 15:59

Dmitry Sadakov · Accepted Answer · 2015-08-09 16:02:39Z

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);
});

answered Aug 9, 2015 at 16:02

Dmitry Sadakov

2,1583 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Devmyselz Over a year ago

why you dont post the reply with pure JS. your code is not JS is just a jquery, not a javascript

Devmyselz · Accepted Answer · 2022-07-18 17:27:00Z

0

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);});

answered Jul 18, 2022 at 17:27

Devmyselz

4585 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related