How to retrieve binarydata source of an image in asp.net

Question

I want to get image preview before uploading any image in my asp.net webform. I am doing this by the following code. But after clicking Save button I want to upload the image to the server. In my codebehind I am getting src="" for <img>. What can I do to get the binarydata back to save my file.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /image.*/;
            if (!file.type.match(imageType)) {
                continue;
            }
            var link = $(fileInput).siblings('.thumb').attr('src');
            alert(link);
            var img = document.getElementById("thumbnil");
            img.file = file;
            var reader = new FileReader();
            reader.onload = (function (aImg) {
                return function (e) {
                    aImg.src = e.target.result;
                };
            })(img);
            reader.readAsDataURL(file);
        }
    }
</script>
</head>
<body>
<form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <input type="file" accept="image/*" onchange="showMyImage(this)" />
            <br />
            <img id="thumbnil" class="thumb" style="width: 20%; margin-top: 10px;" src="" alt="image" runat="server"/>
            <asp:Button runat="server" Text="Save" OnClick="Unnamed_Click"/>
        </ContentTemplate>
    </asp:UpdatePanel>

</form>

Thanks in advance..

dont read the img-tag src-attribute, the client cant update it on server side and it wont be "post-back". use an input field or so — winner_joiner
– winner_joiner, Commented Dec 11, 2014 at 6:55

winner_joiner · Accepted Answer · 2014-12-11 14:26:53Z

1

### Undated whole Answer ###

Option 1:

dont read the img-tag src-attribute, the client cant update it on server side and it wont be "post-back". use an input field like this

<form...>
    ...
    <input class="image-data" type="hidden" id="imageString" runat="server" />
    ...
</form>

and in the Js-Code add this dataurl as value of this field.

 ...
 reader.onload = (function (aImg) {
     return function (e) {
     aImg.src = e.target.result;
     //... add this, it's searches for the input-field, to be able to post the String to the Server
     $(".image-data").val(e.target.result);
 };
 ...

Update:

On the Server you can read the Data like this.

 string imageData = imageString.Value;

Option 2:

you could also do this:

alter your asp.net-file

<!-- add enctype=...  -->
<form id="form1" runat="server" enctype="multipart/form-data">
    ... 
    <!-- add name=... -->
    <input type="file" accept="image/*" onchange="showMyImage(this)" name="uploadImage" />
    ...

in the Codebehind:

HttpPostedFile imageFile= Request.Files["uploadImage"];

if (imageFile && imageFile.ContentLength > 0)
{
   // ... Use the imageFile variable as you please
}

Which Option depends, what you want to do with the data.

edited Dec 11, 2014 at 14:26

answered Dec 11, 2014 at 6:58

winner_joiner

15.3k4 gold badges42 silver badges71 bronze badges

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

5 Comments

rupareliab Over a year ago

.val is not working but this give me another idea to use hiddenfield.

winner_joiner Over a year ago

what you mean val is not working. javascript error? or the field is has no value, or...? please, be a bit more specific.

rupareliab Over a year ago

val is not available for image I mean val is not an attribute.

winner_joiner Over a year ago

val() is set on a hidden input-field <input class="image-data" type="hidden" id="imageString" runat="server" />. Then on the Server you read the data from that hidden field, NOT the image. string imageData = imageString.Value;

rupareliab Over a year ago

Sorry for delayed reply but I used asp:hidden control. But your suggested option is also right..Thank you so much for this idea.

Collectives™ on Stack Overflow

How to retrieve binarydata source of an image in asp.net

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related