Jquery MVC: Upload Image using jquery MVC

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 

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

Relevant Reading

• Email Validation using Jquery
• Numeric Validation using Jquery
• Jquery Timer Countdown in MVC Application
• Capitalize the First Letter of String Using Jquery