Завантаження файлу за допомогою Ajax в Asp.Net Core

[ Полезный рекламный блок ]

Попробуйте свои силы в игре, где ваши навыки программирования на C# станут решающим фактором. Переходите по ссылке 🔰.

Щоб завантажити файл за допомогою Ajax у застосунку Asp.Net Core, ви можете використовувати бібліотеку jQuery для виконання запиту та маніпулювання DOM.

Ось приклади того, як завантажити файл за допомогою Ajax у застосунку Asp.Net Core:

Надсилання файлу з боку сервера

Додайте бібліотеку jQuery у свій проєкт. Ви можете завантажити її з сайту jQuery або використовувати CDN. Наприклад, щоб використовувати CDN, додайте такий рядок у файл _Layout.cshtml:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

1	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Створіть дію у вашому контролері, яка повертає вміст файлу у вигляді рядка. Наприклад:

[HttpGet]
public string GetFileContent()
{
    string filePath = Path.Combine(_environment.WebRootPath, "myfile.txt");
    return System.IO.File.ReadAllText(filePath);
}

[HttpGet]

public string GetFileContent()

{

string filePath = Path.Combine(_environment.WebRootPath, "myfile.txt");

return System.IO.File.ReadAllText(filePath);

}

У цьому прикладі дія зчитує вміст текстового файлу з іменем “myfile.txt“, розміщеного в папці wwwroot проекту.

3. У поданні додайте кнопку або посилання, яке викликатиме Ajax-запит. Наприклад:

<button id="loadFileButton">Load file</button>
<div id="fileContent"></div>

1 2	<button id="loadFileButton">Load file</button> <div id="fileContent"></div>

У цьому прикладі додається кнопка з id “loadFileButton”, а вміст файлу відображатиметься в div з id “fileContent”.

4. Додайте наступний код JavaScript у подання або в окремий файл:

$(document).ready(function () {
    $("#loadFileButton").click(function () {
        $.ajax({
            type: "GET",
            url: "/MyController/GetFileContent",
            success: function (result) {
                $("#fileContent").text(result);
            },
            error: function (xhr, status, error) {
                alert("Error: " + error);
            }
        });
    });
});

$(document).ready(function () {

$("#loadFileButton").click(function () {

$.ajax({

type: "GET",

url: "/MyController/GetFileContent",

success: function (result) {

$("#fileContent").text(result);

error: function (xhr, status, error) {

alert("Error: " + error);

}

});

У цьому прикладі обробляється подія натискання кнопки “loadFileButton”, і Ajax-запит відправляється на дію “GetFileContent” контролера “MyController”. У разі успішного виконання запиту вміст файлу відображається в div “fileContent”. У разі виникнення помилки виводиться попередження з повідомленням про помилку.

Ось і все! Під час натискання на кнопку вміст файлу буде завантажено і відображено на сторінці за допомогою Ajax.

Надсилання файлу з боку клієнта

Вміст Index.cshtml:

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

<div class="label">Click me!</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!");
      }
    }
  );
}

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!");

}

);

}

Контролер MyController:

[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;
}

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

}

Я сподіваюся, що вам сподобалося читати цю статтю, і вона виявилася легкою для розуміння. Будь ласка, дайте мені знати, якщо у вас є якісь коментарі або виправлення.

Так само вам може бути цікава попередня стаття – Як зробити спливаюче модальне вікно в Asp.Net.

Ви хочете навчитися писати код мовою програмування C#?

Створювати різні інформаційні системи, що складаються з сайтів, мобільних клієнтів, десктопних додатків, телеграм-ботів тощо.

Переходьте до нас на сторінку Dijix і ознайомтеся з умовами навчання, ми спеціалізуємося тільки на індивідуальних заняттях, як для початківців, так і для просунутих програмістів. Ви можете взяти як одне заняття для опрацювання питання, що вас цікавить, так і кілька, для більш щільної роботи. Завдяки особистому кабінету, кожен студент підвищить якість свого навчання, у вашому розпорядженні: