Introduction:

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.

Description:

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">
   $(document).ready(function()
   {
       $("#fileuploader").uploadFile({
            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.
            }             
       });
   });
</script>


add uploadImage method in your comtroller

       [HttpPost]
       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 
                myfile.SaveAs(ServerSavePath);
            }
            return Json(myfile.FileName, JsonRequestBehavior.AllowGet);
        }


add DeleteImage method in your comtroller

    [HttpPost]
       public ActionResult DeleteImage(string Image)
       {
            string fullPath = Request.MapPath("~/UploadedFiles/" + Image);
            if(System.IO.File.Exists(fullPath))
            {
                System.IO.File.Delete(fullPath);
            }
 
            return Json("deleted successfully", JsonRequestBehavior.AllowGet);
        } 

 

OutPut:


I hope it will helpful for you

0 comments


Leave a comment

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

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.