Upload mit Progress Bar

<form method="post" enctype="multipart/form-data">

    <input type="file" id="files_input_field" name="files"

           style="visibility:hidden;height:0px;width:0px;"

           onchange="upload_files();" />

    <input type="button" id="select_and_upload_button" value="Upload Photos.." />

</form>

function upload_files() {..}

xhr: function () {

    var xhr = new window.XMLHttpRequest();

    //Upload progress

    xhr.upload.addEventListener("progress", function (evt) {

        if (evt.lengthComputable) {

            var percentComplete = evt.loaded / evt.total;

            $("#ctlProgress").val(percentComplete * 100);

        }

    }, false);

    //Download progress

    xhr.addEventListener("progress", function (evt) {

        if (evt.lengthComputable) {

            var percentComplete = evt.loaded / evt.total;

            //Do something with download progress

            console.log(percentComplete);

        }

    }, false);

    return xhr;

},

$("#ctlProgress").val(percentComplete * 100);

@{

    Layout = null;

}

<h2>Demo Upload with jQuery and Progress</h2>

<form method="post" enctype="multipart/form-data">

    <input type="file" id="files_input_field" name="files" style="visibility:hidden;height:0px;width:0px;" onchange="upload_files();" />

    <input type="button" id="select_and_upload_button" value="Upload Photos.." />

</form>

<progress id="ctlProgress" value="0" max="100"></progress>

<div id="divUploaded_Results" style="display: flex;flex-flow:wrap;"></div>

@*------------< jQuery-script >------------*@

<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>

<script>

    //----< events >----

    $("#select_and_upload_button").click(function () { $("#files_input_field").click(); });

    //--------< functions >--------

    function upload_files() {

        //------< upload_files() >------

        //--< get selected files >--

        var fileUpload = $("#files_input_field").get(0);

        var files = fileUpload.files;

        if (files.length == 0) return;

        //< load into FormData >

        for (var i = 0; i < files.length; i++) {

            var data = new FormData();

            data.append(files[i].name, files[i]);

            //</ load into FormData >

            //--</ get selected files >--

            //--< ajax upload >--

            $.ajax({

                type: "POST",

                url: "Demo_03/Demo/UploadFilesAjax",

                xhr: function () {

                    var xhr = new window.XMLHttpRequest();

                    //Upload progress

                    xhr.upload.addEventListener("progress", function (evt) {

                        if (evt.lengthComputable) {

                            var percentComplete = evt.loaded / evt.total;

                            $("#ctlProgress").val(percentComplete * 100);

                        }

                    }, false);

                    //Download progress

                    xhr.addEventListener("progress", function (evt) {

                        if (evt.lengthComputable) {

                            var percentComplete = evt.loaded / evt.total;

                            //Do something with download progress

                            console.log(percentComplete);

                        }

                    }, false);

                    return xhr;

                },

                contentType: false,  //default: 'application/x-www-form-urlencoded; charset=UTF-8'

                processData: false,  //default: data, other DOMDocument

                data: data,          //Type: PlainObject or String or Array

                //password:string    // HTTP access authentication

                //username:string    // HTTP access authentication

                //jQuery 1.8 success->done error->fail

                success: function (data) {

                    //alert(data);

                    //console.log(data);

                    //---< show return >---

                    //--< Loop: each Result >--

                    $.each(data, function (index, item) {

                        //--< Item  >--

                        //*show uploaded Image in div-Results

                        var sItem = "<div ><img src='User_Files/_Upload_Folder/" + item + "' style='width:150px;'></div>";

                        $("#divUploaded_Results").append(sItem);

                        //--</ Item >--

                    })

                    //--</ Loop: each Result >--

                    //---</ show return >---

                },

                error: function () {

                    alert("There was error uploading files!");

                }

            });

            //------</ upload_files() >------

        }

    }

        //--------</ functions >--------

</script>

@*------------</ jQuery-script >------------*@

using Microsoft.AspNetCore.Mvc;

using IWois_Core.Data;              //ApplicationDbContext

using Microsoft.AspNetCore.Http;

using System.IO;

using Microsoft.AspNetCore.Hosting; //*IHostingEnvironment

using System.Threading.Tasks;       //Task

using System.Data;

using System.Collections.Generic;

namespace IWois_Core.Areas.Demo_03.Controllers

{

    [Area("Demo_03")]

    public class DemoController : Controller

    {

        #region Controller Init

        private readonly ApplicationDbContext _dbContext;

        private readonly IHostingEnvironment _hostingEnvironment;

        public DemoController(ApplicationDbContext dbContext, IHostingEnvironment hostingEnvironment)

        {

            //----< Init: Controller >----

            _dbContext = dbContext;

            _hostingEnvironment = hostingEnvironment;

            //----</ Init: Controller >----

        }

        #endregion

        #region Demo: demo_03_Upload_Progress

        //----------------< region Demo: Ajax_Image_Upload >-----------------

        public IActionResult demo_start()

        {

            //-------------< load StartView >-------------

            return View("demo_03_Upload_Progress");

            //-------------</ load StartView >-------------

        }

        [HttpPost]

        public IActionResult postback(IFormCollection formFields)

        {

            //-------------< demo_jQuery_01_post >-------------

            //< out >

            return View("demo_03_Upload_Progress");

            //</ out >

            //-------------</ demo_jQuery_01_post >-------------

        }

        [HttpPost]

        public async Task<IActionResult> UploadFilesAjax()

        {

            //< init >

            long uploaded_size = 0;

            string path_for_Uploaded_Files = _hostingEnvironment.WebRootPath + "\\User_Files\\_Upload_Folder\\";

            //</ init >

            //< get form_files >

            //IFormFile uploaded_File

            var uploaded_files = Request.Form.Files;

            //</ get form_files >

            //------< @Loop: Uploaded Files >------

            int iCounter = 0;

            string sFiles_uploaded = "";

            List<string> list_Files = new List<string>();

            foreach (var uploaded_file in uploaded_files)

            {

                //----< Uploaded File >----

                iCounter++;

                uploaded_size += uploaded_file.Length;

                sFiles_uploaded += "\n" + uploaded_file.FileName;

                list_Files.Add(uploaded_file.FileName);

                //< Filename >

                string  uploaded_Filename = uploaded_file.FileName;                

                string new_Filename_on_Server = path_for_Uploaded_Files + "\\" + uploaded_Filename;

                //</ Filename >

                //< Copy File to Target >

                using (FileStream stream = new FileStream(new_Filename_on_Server, FileMode.Create))

                {                   

                    await uploaded_file.CopyToAsync(stream);

                }

                //< Copy File to Target >

                //----</ Uploaded File >----

            }

            //------</ @Loop: Uploaded Files >------

            return Json(list_Files);

        }

        //----------------</ region Demo: jQuery_Functions >-----------------

        #endregion

    }

}