.

Friday, 13 June 2014

Multiple File Upload With Asp.Net MVC C# and HTML5 | How to upload files to ASP.NET MVC application

6/13/2014 - By Pranav Singh 0

I have showed you so many articles for uploading files in asp.net how to upload file by using fileupload control. Now I will tell you how you can upload Multiple file upload with asp.net mvc and HTML5 and C#.net.


Now for this article first we will create a new mvc application and add new controller and now create view for the controller action. After creating the action view add the blow code

@{
    ViewBag.Title = "Multiple file upload with asp.net mvc and HTML5";
}

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <h3>Multiple file upload with asp.net MVCc/MVC3/MVC4/MVC5, C# and HTML5 </h3>
    <input type="file" name="files" value="" multiple="multiple"/>
    <input type="submit" value="Upload You Image"  title="Uplad"/>
    <div style="color:Red;font-size:14px">@ViewBag.Message</div>
}

Now add the below code in you action post method
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ProjectDemo_MVC.Controllers
{
    public class HomeController : Controller
    {
        /// <summary>
        /// Multiple file upload with asp.net mvc and HTML5
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            return View();
        }
        /// <summary>
        /// Post method for uploading files
        /// </summary>
        /// <param name="files"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult Index(HttpPostedFileBase[] files)
        {
            try
            {
                /*Lopp for multiple files*/
                foreach (HttpPostedFileBase file in files)
                {
                    /*Geting the file name*/
                    string filename = System.IO.Path.GetFileName(file.FileName);
                    /*Saving the file in server folder*/
                    file.SaveAs(Server.MapPath("~/Images/" + filename));
                    string filepathtosave = "Images/" + filename;
                    /*HERE WILL BE YOUR CODE TO SAVE THE FILE DETAIL IN DATA BASE*/
                }

                ViewBag.Message = "File Uploaded successfully.";
            }
            catch
            {
                ViewBag.Message = "Error while uploading the files.";
            }
            return View();
        }

    }
}

After adding code we will add an images folder where uploaded files will save.


 Now run the page. You will get output as shown below



Now select the images to upload



Now click on upload button to upload the files. In your controller you will see the collection of all the files which you you have uploaded.


Now final screen with success message.

Image




now check the Images folder which you have created. 





 DOWNLOAD

About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks

Tips and Tricks

About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

Please contact Us

Email Id
: contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.
© 2014
back to top