Click here to Skip to main content
11,490,543 members (36,162 online)
Click here to Skip to main content

Tagged as

Save and retrieve image from Model using jQuery

, 4 Oct 2012 CPOL 13.2K 7
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 Pin
sartard24-Dec-13 7:43
membersartard24-Dec-13 7:43 
QuestionSource code of this example Pin
sayedfarhan19-Dec-13 21:34
membersayedfarhan19-Dec-13 21:34 
GeneralThanks Pin
rizwankhan00730-Nov-13 9:18
memberrizwankhan00730-Nov-13 9:18 
QuestionQuestion Pin
FlyersWeb4-Oct-12 11:52
memberFlyersWeb4-Oct-12 11:52 
AnswerRe: Question Pin
thugmca@gmail.com6-Oct-12 9:23
memberthugmca@gmail.com6-Oct-12 9: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 | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 4 Oct 2012
Article Copyright 2012 by Thiyagarajan NXG
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid