Dateien mit Ajax hochladen : Asp Net Core MVC und jQuery

Date 16.03.2018

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>

Buttons

Button: Datei auswählen

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

Button: Upload

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

Komplettes HTML Form

<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 >------------*@

$(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;

}

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

name="files" multiple />

<input type="button"

id="upload"

value="Upload" />

</form>

@*------------< jQuery-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

}