Click here to Skip to main content
13,446,494 members (42,819 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


7 bookmarked
Posted 6 Sep 2012

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.


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


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
<td id="partial1"> 
<%Html.RenderPartial("PVImageBind"); %> 
// 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'/>";

    // r.readAsBinaryString(file);

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


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


About the Author

Thiyagarajan NXG
Software Developer (Senior)
India India

7+ years of Experience in .Net Technologies (moving on 4.0 Framework,Asp.Net,Windows Application, Mvc 2.0,4.0, Javascript, Jquery, Html 5,SQL SERVER R2..)

Hobbies: playing keyboard,Cricket, surfing net.

You may also be interested in...


Comments and Discussions

QuestionNot working for all browsers Pin
sartard24-Dec-13 6:43
membersartard24-Dec-13 6:43 
QuestionSource code of this example Pin
sayedfarhan19-Dec-13 20:34
membersayedfarhan19-Dec-13 20:34 
GeneralThanks Pin
rizwankhan00730-Nov-13 8:18
memberrizwankhan00730-Nov-13 8:18 
QuestionQuestion Pin
FlyersWeb4-Oct-12 10:52
memberFlyersWeb4-Oct-12 10:52 
AnswerRe: Question Pin
thugmca@gmail.com6-Oct-12 8:23
memberthugmca@gmail.com6-Oct-12 8:23 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03-2016 | 2.8.180314.2 | Last Updated 4 Oct 2012
Article Copyright 2012 by Thiyagarajan NXG
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid