A day with .Net

My day to day experince in .net

File upload with ASP.NET MVC and Jquery Form Plugin.

Posted by vivekcek on April 21, 2014

In this post, i will show you how to upload a file without a full postback using Jquery Form Plugin.
Jquery form plugin use ajax to upload the file. This technique will be more helpful when you need to upload file from a modal partial view.

Refer these scripts.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

Create a file input and a submit button.

@using (Html.BeginForm("Save", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">

Now create some div’s for progress bar and status

<div class="progress">
    <div class="bar"></div>
    <div class="percent">0%</div>
<div id="status"></div>

Now include this script in your view

    (function () {

        var bar = $('.bar');
        var percent = $('.percent');
        var status = $('#status');

            beforeSend: function () {
                var percentVal = '0%';
            uploadProgress: function (event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
            success: function () {
                var percentVal = '100%';
            complete: function (xhr) {


Now write a save method in your controller

 public ActionResult Save(HttpPostedFileBase myfile)
         return RedirectToAction("Index");

One Response to “File upload with ASP.NET MVC and Jquery Form Plugin.”

  1. Thanks…a lot

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s