CODEWITHSUNDEEP
jqueryasp.netsql-server-2008
Developer
Developer

Reputation: 13

how to display a image by fileupload using jquery or javascript and path will store on db?

in web page ,image control and file upload are there.if click file upload and select image file from local disc and it will display that image in asp.net image control without clicking another buttons or refreshing the page and before going to display that image its path has to be stored in database

Upvotes: 1

Views: 4929

Answers (1)

Ashwin Singh
Ashwin Singh

Reputation: 7355

Use this function, remember to include jQuery library. The following function uses a reader, to read data and set it to the image src. Image src can also be urldata. 

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

            reader.onload = function (e) {
                $('#PreviewImage').attr('src', e.target.result);
            };
     reader.readAsDataURL(input.files[0]);
        }
    }

Add this to your image upload onchange="readURL(this);". ASP.NET UploadControl has some problem with this function, use HTML upload control instead.

<img id="PreviewImage" src="" alt="?" style="width:100px; height:100px;"  />
     <input type="file" ID="ImageFileUpload" onchange="readURL(this);" />

Here is an working example http://jsbin.com/amoxip/2/edit#javascript,html

Upvotes: 3

Related Questions