Projekt-Anfragen: Tel: 07022/9319004 info@CodeDocu.de Software Entwicklung in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

 

Dieses Beispiel zeigt wie man mit Asp Core MVC und jQuery-Ajax mehrere Fotos oder Dateien zum Server hochladen kann.

Dabei wird die Übertragung asynchron geladen unter ajax und json, wodurch die WebSeite nicht erneut aufgebaut werden muss.

 

Mit dem jQuery-javascript kann man im einfachen Dateidialog mehrere Bilder auswählen und mit Öffnen in den Browser übernehmen.

 

 

Nach dem Drücken des Upload-Buttons werden alle Dateien hochgeladen und vom Asp IISServer wird die Meldung zurück gegeben, welche Dateien empfangen wurden und verarbeitet wurden.

 

Nach dem Upload befinden sich die hochgeladenen Dateien unter dem Verzeichnis wwwroot User-Dateien

 

 

 

Code Erläuterung

 

View Webseite

 

1) HTML Form-Code

In der Anzeige View wird zunächst ein HTML Form mit dem Typ enctype=multipart/form-data eingefügt

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

    ..

</form>

 

 

Buttons

Button: Datei auswählen

Als Buttons zum Auswählen der Dateien wird ein input vom type=file mit dem Attribute multiple eingefügt

<input type="file" id="files"name="files" multiple />

 

Button: Upload

Zum Upload wird ein einfach button mit id verwendet. Dieser wird mit jQuery im script mit der id als event angebunden.

<input type="button" id="upload" value="Upload" />

 

Komplettes HTML Form

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

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

           name="files" multiple />

    <input type="button"

           id="upload"

           value="Upload" />

</form>

 

2) jQuery-Code

 

Im script Block wird erst ein event-Listener für den Upload-Button eingerichtet.

Dadurch wird auf den click() Event des Buttons die function ausgeführt.

$("#upload").click(function (evt){..}

 

2a) jQuery Upload function

Zunächst warden die eingegebenen Files aus dem input: Datei auswahl übernommen.

Hieraus erhält man die .Files, welche geladen werden sollen

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

var files = fileUpload.files;

 

Dann werden alle ausgewählten Dateien .files in ein neuen FormData() Container geladen

var data = new FormData();

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

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

}

 

Dieser Daten-Container wird dann mit jQuery .ajax hochgeladen.

Die angegebene URL entspricht der Asp.Net Core MVC Controller-Methode, welche die Dateien empfängt.

jQuery: type: Post, contentType:false, data:data

$.ajax({

    type: "POST",

    url: "Demo_02/Demo/UploadFilesAjax",

    contentType: false,

    processData: false,

    data: data,

    success: function (message) {

        alert(message);

    },

    error: function () {

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

    }

 

 

 

 

jQuery script zum Upload von mehreren Dateien

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

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

<script>

    $(document).ready(function () {

        $("#upload").click(function (evt) {

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

            var files = fileUpload.files;

            var data = new FormData();

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

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

            }

            $.ajax({

                type: "POST",

                url: "Demo_02/Demo/UploadFilesAjax",

                contentType: false,

                processData: false,

                data: data,

                success: function (message) {

                    alert(message);

                },

                error: function () {

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

                }

            });

        });

    });

   

</script>

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

 

Kompletter View-Code:

Asp Razor Code plus jQuery Code

 

@{

    Layout = null;

}

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

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

           name="files" multiple />

    <input type="button"

           id="upload"

           value="Upload" />

</form>

 

 

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

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

<script>

    $(document).ready(function () {

        $("#upload").click(function (evt) {

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

            var files = fileUpload.files;

            var data = new FormData();

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

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

            }

            $.ajax({

                type: "POST",

                url: "Demo_02/Demo/UploadFilesAjax",

                contentType: false,

                processData: false,

                data: data,

                success: function (message) {

                    alert(message);

                },

                error: function () {

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

                }

            });

        });

    });

   

</script>

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

 

 

Asp Core MVC Controller Code

 

Die Upload-Dateien werden von einer HttpPost Methode ohne Parameter übernommen

    [HttpPost]

    public async Task<IActionResult> UploadFilesAjax()

    {..}

 

 

Im ersten Schritt werden die Dateien übernommen, welche hochgeladen wurden.

Diese befinden sich in der Requery Form

var uploaded_files = Request.Form.Files;

 

Dann warden alle Files durchlaufen

foreach (var uploaded_file in uploaded_files)

        {..}

 

Nach Auswertung des Dateinamens werden die Dateien in den Zielpfad übertragen

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

{            

  await uploaded_file.CopyToAsync(stream);

}

 

Asp Net Core MVC Code in C# der Upload Methode

    [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 = "";

        foreach (var uploaded_file in uploaded_files)

        {

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

            iCounter++;

            uploaded_size += uploaded_file.Length;

            sFiles_uploaded += "\n" + 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 >------

 

 

        string message = "Upload successful!\n files uploaded:" + iCounter + "\nsize:" + uploaded_size  + "\n" + sFiles_uploaded ;

        return Json(message);

    }

 

 

 

Kompletter Controller Code

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

 

namespace IWois_Core.Controllers

{

    [Area("Demo_02")]

    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: Ajax_Image_Upload

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

        public IActionResult demo_start()

        {

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

            return View("demo_02_Ajax_Image_Upload");

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

        }

 

        [HttpPost]

        public IActionResult ajax_Image_Upload_post(IFormCollection formFields)

        {

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

            //TODO:

            //< load Images >

            //ViewData["Text1"] = "postback-return: <br/>" + sHTML;

            //ViewData["Text2"] = sText;

            //</ load Data >

 

            //< out >

            return View("demo_02_Ajax_Image_Upload");

            //</ 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 = "";

            foreach (var uploaded_file in uploaded_files)

            {

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

                iCounter++;

                uploaded_size += uploaded_file.Length;

                sFiles_uploaded += "\n" + 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 >------

 

 

            string message = "Upload successful!\n files uploaded:" + iCounter + "\nsize:" + uploaded_size  + "\n" + sFiles_uploaded ;

            return Json(message);

        }

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

        #endregion

 

    }

}

 

 

 

 

Mobile
»
Upload mit Progress Bar
»
jQuery: Wert einer HTML Progress Anzeige einstellen
»
Dateien hochladen und anzeigen mit jQuery ajax, FileUpload, Anzeigen des json Results
»
jQuery: 1-Button File-Upload mit Autostart
»
Dateien mit Ajax hochladen : Asp Net Core MVC und jQuery
»
jQuery: Function vor Submit Senden ausführen
»
jQuery: function nach dem Laden einer Seite ausführen
»
jQuery: HTML Elemente in ein Element einfügen
»
jQuery: Paste Event beim Einfügen von Text in ein HTML Element
»
jQuery: Insert event bei Text Eingabe

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Info@CodeDocu.de