HtmlInputFile used where FileUpload is wanted

Question

I've created a webform using asp.net, the purpose of the webform is to connect to a database, pull the selected information out of the database, and display it on the screen. It is also capable of adding and updating records in the database. One of the fields in the database is a Logo (which is obviously a picture).

I would like to, and have managed to, display this logo when a particular company's Scheme code is selected from a dropdown menu. I used some Javascript for this. Happy days!

I would also like to be able to select an image from the disk to preview on the web page, and then if it is OK, upload it to the database. I can preview it fine, I used some Javascript for this. But because I've used some Javascript front-end, I'm no longer using the familiar FileUpload control.

I need to be able to convert the file which gets selected in the <input ID="logoPrvw" type ="file" onchange="previewFile()" runat="server" /> control into a byte array in order to place it in the database table

The Javascript on the front-end code, within the head tag is...

            <script type="text/javascript">
    function previewFile() {
        var preview = document.querySelector('#<%=imgLogo.ClientID %>');
        var file = document.querySelector('#<%=logoPrvw.ClientID %>').files[0];
        var reader = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
        }
    }
</script>

I'm looking into the HtmlInputFile class but I can't find anything useful.

Cheers again folks!

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

You may try as below : (Reference)

var p;var canvas = document.createElement("canvas");
var img1=document.createElement("img"); 

function getBase64Image(){     
    p=document.getElementById("fileUpload").value;
    img1.setAttribute('src', p); 
    canvas.width = img1.width; 
    canvas.height = img1.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img1, 0, 0); 
    var dataURL = canvas.toDataURL("image/png");alert("from getbase64 function"+dataURL );    
    return dataURL;
}

edited May 23 '17 at 12:06

Community

1
1

answered Jun 02 '15 at 13:01

developer

1,565
1
9
12

Ok cheers, I think I know whats going on, this goes in the head tag on the code in front yeah? – Bigtingz92 Jun 02 '15 at 13:15
In between code in html page. It is better approach to make a separate javascript file and give reference of it in your html file – developer Jun 02 '15 at 13:19

HtmlInputFile used where FileUpload is wanted

1 Answers1