Navigation

Jquery MVC: Upload Image using jquery MVC

upload image using jquery mvc, upload image in mvc, upload image in mvc razor, upload image in mvc 5, upload image

Introduction

Image Upload is very important work in our web application. It is most orderly needed whereas registering profile somebody with profile image, making album etc. I have explained during this article, how to upload image in MVC application (Razor Engine) using Jquery and preview image instantly. Image Uploading is gorgeous task of your application whenever search somebody image, if profile image is blur or heavy image then it'll increase your process time, blur image will lead to dangerous impact in visitor's mind means that cut traffic towards website or user profile. I have bring up a dashing working example.

Main Features

Here, I have included main features like Upload Image, Re size Image, Give New File Name using GUID and finally preview image.

Step 1: Take Input File box

Step 2: Now take a new input box wherever new file will display

New File Name:

Step 3: Image Preview

Now take Image Preview control wherever we will preview uploaded image directly.

Step 4: Jquery Call to MVC Controller Method

Here explaining concerning JQuery call to MVC controller method.
    $("#UploadImg").change(function () {
        var data = new FormData();
        var files = $("#UploadImg").get(0).files;
        if (files.length > 0) {
            data.append("MyImages", files[0]);
        }
        
        $.ajax({
            url: "/UploadImage/UploadFile",
            type: "POST",
            processData: false,
            contentType: false,
            data: data,
            success: function (response) {
                //code after success
                $("#txtImg").val(response);
                $("#imgPreview").attr('src', '/Upload/' + response);
            },
            error: function (er) {
                alert(er);
            }

        });
    });

Step 5: MVC Controller Action

Here is a written logic to create a new file name, re size image and upload finally to specific folder "Upload"
 
  [AcceptVerbs(HttpVerbs.Post)]
public JsonResult UploadFile()
{
   string _imgname = string.Empty;
   if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
   {
      var pic = System.Web.HttpContext.Current.Request.Files["MyImages"];
        if (pic.ContentLength > 0)
           {
             var fileName = Path.GetFileName(pic.FileName);
             var _ext = Path.GetExtension(pic.FileName);

             _imgname = Guid.NewGuid().ToString();
             var _comPath = Server.MapPath("/Upload/MVC_") + _imgname + _ext;
             _imgname = "MVC_" + _imgname + _ext;

             ViewBag.Msg = _comPath;
             var path = _comPath;

             // Saving Image in Original Mode
             pic.SaveAs(path);

             // resizing image
             MemoryStream ms = new MemoryStream();
             WebImage img = new WebImage(_comPath);

             if (img.Width > 200)
               img.Resize(200, 200);
               img.Save(_comPath);
               // end resize
             }
    }
   return Json(Convert.ToString(_imgname), JsonRequestBehavior.AllowGet);
}

Step 6: Final View of Upload Image 

MVC Image Upload Jquery

Conclusion

You saw specifically steps, however can we upload image, re size image and preview image directly. I have explained all steps one by one to beautify your image upload in MVC application using Jquery.

Download Example

Download

Relevant Reading

Share

Anjan Kant

Outstanding journey in Microsoft Technologies (ASP.Net, C#, SQL Programming, WPF, Silverlight, WCF etc.), client side technologies AngularJS, KnockoutJS, Javascript, Ajax Calls, Json and Hybrid apps etc. I love to devote free time in writing, blogging, social networking and adventurous life

Post A Comment:

9 comments:

  1. Nice tutorial sir on MVC image upload.
    Well its having image resizing code, so its good to set a check on file extension (only image) before upload. Here have written an article on Image extension check [jquery]

    ReplyDelete
  2. Replies
    1. welcome, keep visiting here more MVC, Jquery tutorials.

      Delete
  3. thank you bro ,
    good and simple ;)

    ReplyDelete
  4. How identify a photo which was loaded by person?

    ReplyDelete
    Replies
    1. then you need to store photo into database and show data accordingly.

      Delete