Uploading single image and showing its thumbnail using jquery and asp.net mvc3

Question

I need to upload the photo of a user with his details from asp.net mvc3 razor view. The image selected by the user has to be shown as thumbnail before submitting the form.

The model of the view contains a byte array property called Photo. On page load i am converting this byte array to base 64 string and showing it in . this is working properly .

Now i need to show the thumbnail of the image selected by the user. And when he clicks on submit button i need to bind the selected image to the model property Photo.

After googling , i came to know that showing thumbnail is not possible until I upload that image. I tried Uploadify but its UI behavior is not what i am expecting. I also tried the article http://www.dustinhorne.com/post/2011/11/16/AJAX-File-Uploads-with-jQuery-and-MVC-3.aspx, but it is also not suitable in our scenario.

can anyone help me by sharing their experience achieving this scenario.

Thanks in advance.

Darin Dimitrov · Accepted Answer · 2012-03-19 08:44:29Z

2

You could achieve this using HTML5 File API. Take a look at the following article and more specifically the Showing thumbnails of user-selected images section which illustrates an example of how you could achieve that without uploading the image to the server.

And if you want to support legacy browsers that do not yet support the HTML5 File API you could use the jQuery.form plugin which allows you to easily send the contents of a given form to the server using AJAX and it also supports file uploads. So basically you could subscribe to the .change() event of the file input or the .click() event of some see thumbnail ... button and then submit the form to a controller action using AJAX:

$('#myform').ajaxSubmit({
    url: '@Url.Action("thumbnail")',
    success: function(result) {
        // the result variable will contain the result of
        // the execution of the Thumbnail action.
        // could be a BASE64 encoded representation of 
        // the thumbnail you generated on the server and then
        // simply set it to the src property of your preview `<img>`
        // element using the Data Uri scheme
    }
});

edited Mar 19, 2012 at 8:44

answered Mar 19, 2012 at 8:39

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

5 Comments

Sujith Kp Over a year ago

Thanks for your help, but we are at present developing only for IE 9, are you sure that File Api will work on IE9?

Darin Dimitrov Over a year ago

@SujithKp, IE 9 doesn't support the File API. Support will be added in IE 10. If you need to use IE 9 you might take the second approach I suggested in my answer using the jQuery form plugin.

Sujith Kp Over a year ago

Thanks Darin , I tried Jquery.form plugin, it is sending request to the controller, but i am not getting the contents (file) in the form. what should be the parameter for the controller, when i use HttpContext as parameter , the request is not getting submitted.

Darin Dimitrov Over a year ago

@SujithKp, it should be a HttpPostedFileBase parameter with the same name as the name of the file input.

Sujith Kp Over a year ago

Thanks Darin for you help. i have achieved my objective using Jquery.form plugin.

Collectives™ on Stack Overflow

Uploading single image and showing its thumbnail using jquery and asp.net mvc3

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