Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Save and retrieve image from Model using jQuery

, 4 Oct 2012
Rate this:
Please Sign up or sign in to vote.
Save and retrieve image from model using jQuery.

Introduction

This article shows how to get an image from the Model and send the image as a base64 string using jQuery.

Background

This article is helpful for beginners who are working with partial views and jQuery.

Using the code 

  1. HTML code for file upload.
  2. Partial view tag, how do render with HTML, is coded below. "PVImageBind" is the partial view name.
  3. Get the image from the model as a base64 string.

It is data. lstCompanyInfo.UploadFileName is a list object. data.lstCompanyInfo.UploadFileName is a property. Dynamically add the base64 string to:

var imag = "<img " + "src='" + "data:image/jpg;base64," + 
    data.lstCompanyInfo.UploadFileName + "' style='width:100px'/>";

Save the image from upload file to path to base64 string

  1. In the fileupload control OnChange function we convert the image from the path.
  2. FileList is used to list files. We can also add multiple files at the same time. But here we are using a single file. fileList[0]; is used for the first location.
  3. Filereader is used to read the file
var fileList = this.files;
                    var file = fileList[0];
var r = new FileReader();
var binimage = r.result;

The reader result is assigned the base64 string data:image/jpeg;base64 that contains the JPEG extension string. But it does not accept it and we have to replace the string with an empty one or else you can replace the string with data:image/jpg;base64 and it will work fine.

binimage1 = binimage.replace('data:image/jpeg;base64,', '');
//Partial View
//Html Code for file upload
<td>Company Logo:</td><td><input  type="file"  
 class="txt" name="FileUpload" 
 id="FileUpload" /><p>

<small>Displayed in packing list. Size 100x100 pixels.
<br>Upload files of type .bmp, .jpg, .gif
</small></p></td>
<td id="partial1"> 
<%Html.RenderPartial("PVImageBind"); %> 
</td>  
// Get the Value from Model 
<pre lang="C++"> 
data = eval("(" + data + ")");
if ((data.lstCompanyInfo.UploadFileName == null) || (
 data.lstCompanyInfo.UploadFileName == "")) {
 $('#prevImage').attr('src', "../../images/photo_upload.png");
 }
 else {
     var imag = "<img " + "src='" + 
     "data:image/jpg;base64," + data.lstCompanyInfo.UploadFileName + 
     "' style='width:100px'/>";
     ImageLogo = data.lstCompanyInfo.UploadFileName
 }

 //Upload the File and Convert into base64 string
 $('#FileUpload').live('change', function () {

    var fileList = this.files;
    var file = fileList[0];
    var r = new FileReader();
    r.onload = function () {
        var binimage = r.result;
        binimage1 = binimage.replace('data:image/jpeg;base64,', '');
        var imag = "<img " + "src='" + 
            "data:image/jpg;base64," + binimage1 + "' style='width:100px'/>";
        $("#partial1").html(imag);

    };
    r.readAsDataURL(file);
    // r.readAsBinaryString(file);
    //r.readAsDataURL(file);
});

This is my very first for article writing. If there any mistakes, let me know. Thank you very much.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Thiyagarajan NXG
Software Developer Expert Solution Technologies
India India
Thiyagarajan
 
2+ years of Experience in .Net Technologies (moving on 4.0 Framework,Asp.Net,Windows Application, Mvc 2.0, Javascript, Jquery, Html 5,SQL SERVER R2..)
 
Hobbies: playing keyboard,Cricket, surfing net.
Follow on   Google+

Comments and Discussions

 
QuestionNot working for all browsers Pinmembersartard24-Dec-13 6:43 
QuestionSource code of this example Pinmembersayedfarhan19-Dec-13 20:34 
GeneralThanks Pinmemberrizwankhan00730-Nov-13 8:18 
QuestionQuestion PinmemberFlyersWeb4-Oct-12 10:52 
AnswerRe: Question Pinmemberthugmca@gmail.com6-Oct-12 8:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140921.1 | Last Updated 4 Oct 2012
Article Copyright 2012 by Thiyagarajan NXG
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid