Загрузка файла с помощью 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 и ознакомьтесь с условиями обучения, мы специализируемся только на индивидуальных занятиях, как для начинающих, так и для более продвинутых программистов. Вы можете взять как одно занятие для проработки интересующего Вас вопроса, так и несколько, для более плотной работы. Благодаря личному кабинету, каждый студент повысит качество своего обучения, в вашем распоряжении: