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.