It is well explained here:
Browser Side Code:
HTML
<form id="form" name="form" action="/uploader" enctype="multipart/form-data" method="post">
<div class="buttons">
<div class="upload-button">
<div class="label">Click me!</div>
<input id="files" name="files" type="file" size="1" multiple onchange="uploadFiles('files');" />
</div>
</div>
</form>
JavaScript
function uploadFiles(inputId) {
var input = document.getElementById(inputId);
var files = input.files;
var formData = new FormData();
for (var i = 0; i != files.length; i++) {
formData.append("files", files[i]);
}
$.ajax(
{
url: "/uploader",
data: formData,
processData: false,
contentType: false,
type: "POST",
success: function (data) {
alert("Files Uploaded!");
}
}
);
}
Server Side Code:
[HttpPost]
public async Task<IActionResult> Index(IList<IFormFile> files)
{
foreach (IFormFile source in files)
{
string filename = ContentDispositionHeaderValue.Parse(source.ContentDisposition).FileName.Trim('"');
filename = this.EnsureCorrectFilename(filename);
using (FileStream output = System.IO.File.Create(this.GetPathAndFilename(filename)))
await source.CopyToAsync(output);
}
return this.View();
}
private string EnsureCorrectFilename(string filename)
{
if (filename.Contains("\\"))
filename = filename.Substring(filename.LastIndexOf("\\") + 1);
return filename;
}
private string GetPathAndFilename(string filename)
{
return this.hostingEnvironment.WebRootPath + "\\uploads\\" + filename;
}