In this article we will explain how to upload single or multiple files in mvc using jQuery Upload File plugin with example.  

Before getting started let’s know basics about jQuery Upload File plugin.


Upload File  is an open source jQuery plugin that is used to create a file uploader with progress bar that supports multiple files and drag & drop uploads. Click here to download it.

let start a simple demonstration of jQuery Upload multiple File

Include jQuery javascript library and jQuery upload file plugin on the html page

    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/jquery.uploadfile.min.js"></script>

Include required jQuery upload file stylesheet to style the uploader

<link href="~/Content/uploadfile.css" rel="stylesheet" />

Create a div container for your file uploader

  <div id="fileuploader">Upload</div>

Call the plugin with options

<script type="text/javascript">
            url: "/Home/UploadImage",
            fileName: "myfile",
            returnType: "json",          
            showDelete: true,
            showDownload: false,
            statusBarWidth: 600,
            dragdropWidth: 600,
            maxFileSize: 200 * 1024,
            showPreview: true,
            previewHeight: "100px",
            previewWidth: "100px",
            deleteCallback: function (data, pd) {
                $.post("/Home/DeleteImage", { Image: data },
                        function (resp, textStatus, jqXHR) {
                            //Show Message     
                            alert("File Deleted");
                pd.statusbar.hide(); //You choice.

add uploadImage method in your comtroller

       public ActionResult UploadImage(HttpPostedFileBase myfile)
            if(myfile != null)
                var InputFileName = Path.GetFileName(myfile.FileName);
         var ServerSavePath = Path.Combine(Server.MapPath("~/UploadedFiles/") + InputFileName);
                //Save file to server folder 
            return Json(myfile.FileName, JsonRequestBehavior.AllowGet);

add DeleteImage method in your comtroller

       public ActionResult DeleteImage(string Image)
            string fullPath = Request.MapPath("~/UploadedFiles/" + Image);
            return Json("deleted successfully", JsonRequestBehavior.AllowGet);



upload multiple files using jquery ajax in mvc

I hope it will helpful for you


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like