LalA LalA - 1 year ago 70
ASP.NET (C#) Question

Upload files, show filenames on form immediately, BUT files get only uploaded to server om Form submit

I'm new to mvc and have a little trouble figuring out how to upload files to the server .

I have a form where the user enters name , address, city , upload files.

The user must be able to upload max 3 files . After the user has selected eg . 2 files , we display immediately files names on the form like this:

Uploaded files:

BUT the selected files should ONLY be uploaded to the server after the form is submitted to server.

Answer Source

You can display a list of files to be uploaded by subscribing to the change event of the upload control in jQuery.


public class UploaderController : Controller
    public ActionResult Index()
        return View();

    public ActionResult Multiple(IEnumerable<HttpPostedFileBase> files)
        foreach (var file in files)
            if (file != null && file.ContentLength > 0)
                file.SaveAs(Path.Combine(Server.MapPath("/uploads"), Guid.NewGuid() + Path.GetExtension(file.FileName)));
        return View("Index");


    <meta name="viewport" content="width=device-width" />
    <script src=""></script>
    <script type="text/javascript">
        $(function () {
            $('#uploadFiles').on("change", function () {
                var fileUpload = $(this);
                var files = fileUpload.context.files;

                $("#files").append("<h3>List of files to be uploaded:</h3>");

                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var name =;

                    var div = "<div>File name:" + name + "</div>";
    @using (Html.BeginForm("Multiple", "Uploader", FormMethod.Post, new { enctype = "multipart/form-data" }))
        <div id="multiple">
            <input id="uploadFiles" type="file" class="multiple" name="files" multiple />
        <button class="btn btn-default">Upload</button>
        <div id="files">


Listing files to be uploaded using jQuery

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download