[ Полезный рекламный блок ]
Попробуйте свои силы в игре, где ваши навыки программирования на C# станут решающим фактором. Переходите по ссылке 🔰.
В это статье мы рассмотрим, как выполнить загрузку файла на сервер, путем перетаскивания в Asp.Net Core Mvc.
Загрузка файлов путем перетаскивания (drag-and-drop) имеет несколько преимуществ по сравнению с выбором файлов по одному. Перетаскивание файлов является более интуитивным способом загрузки. Пользователю не нужно искать файлы в проводнике и выбирать их по одному. Вместо этого он может просто перетащить файлы с рабочего стола или из другой папки прямо на веб-страницу или в приложение, что сокращает количество шагов и делает процесс более простым.
При выборе файлов по одному пользователю иногда нужно искать файлы среди множества папок, и это может стать сложной задачей, особенно если у файлов нет явной системы иерархии. Перетаскивание файлов устраняет необходимость вручную просматривать структуру папок, что сокращает возможность выбрать неправильный файл.
Создание и настройка проекта
Чтобы создать проект MultipleFileUploader, запустите Visual Studio и выберите в меню File (Файл) — New Project (Создать Проект). Укажите шаблон проекта ASP.NET Core Web Application (Веб-приложение ASP.NET Core).
Введите MultipleFileUploader, в поле Name, на следующей странице укажите Framework .Net 7.0 и нажмите кнопку Create.
Все загруженные изображения, мы будем хранить в папке: wwwroot / uploadedFiles, поэтому сразу создадим ее.
Для визуального отображения формы, папку wwwroot / css, добавим файл formUploader.css, со следующим содержимым:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
.files-container label { width: 100%; height: 100%; text-align: center; line-height: 170px; font-family: Arial; } .upload { position: relative; display: block; border: 1px solid black; background-color: #ecedee; padding: 3em; margin: 1em auto; border-radius: 4px; } .files-container button { width: 100%; } .upload label { border-bottom: 1px solid #ccc; padding: 1em; text-align: center; font-weight: bold; font-size: 1em; } .upload:hover { background-color: #86b7fe; } .upload input { position: absolute; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; padding: 0; } #names li { margin: 1em; } |
Для чтения входных файлов и обновления их содержимого с указанием имен файлов, необходимо написать немного JavaScript кода. В папку wwwroot / js, добавим файл formUploader.js, со следующим содержимым:
1 2 3 4 5 6 7 8 9 10 11 |
function displayNames(input, target) { const output = document.getElementById(target); output.innerHTML = ''; const files = input.files for (let i = 0; i < files.length; i++) { let file = files.item(i) let el = document.createElement('li'); el.innerText = file.name; output.appendChild(el); } } |
В этом приложении мы будем использовать валидацию данных на стороне клиента
Клиентская валидация позволяет проверить введенные пользователем данные на стороне клиента (веб-браузера) до того, как данные будут отправлены на сервер. Это может быть полезным для обеспечения более быстрой обратной связи пользователю и снижения нагрузки на сервер, так как некоторые простые проверки могут быть выполнены без отправки данных на сервер.
Откроем файл Views / Shared / _ValidationScriptsPartial.cshtml и изменим его содержимое следующим образом:
1 2 3 |
<script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script> |
В проекте нашего типа, по умолчанию уже определены все необходимые скрипты для валидации данных на стороне клиента.
Первоначальная настройка завершена.
Модель представления
Ради повышения удобства работы с приложением в процессе загрузки и обработки файлов, определим в корне папку ViewModels, в которую добавим класс UploadFileViewModel.cs, со следующим содержимым:
1 2 3 4 5 6 |
public class UploadFileViewModel { [Required(ErrorMessage = "Choose file(s).")] [Display(Name = "Drag your files here or click in this area.")] public List<IFormFile> Uploads { get; set; } } |
Данный класс содержит коллекцию загружаемых файлов и атрибуты валидации.
Контроллер и представления
Перейдем в контроллер Home и изменим его содержимое следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
public class HomeController : Controller { [HttpGet] public IActionResult Index() { return View(); } [HttpPost] [AutoValidateAntiforgeryToken] public async Task<IActionResult> UploadFiles([FromServices] IWebHostEnvironment environment, UploadFileViewModel ufv) { if (ModelState.IsValid) { long size = 0; var files = ufv.Uploads; foreach (var file in files) { string path = $"/uploadedfiles/{file.FileName}"; using (var fileStream = new FileStream(environment.WebRootPath + path, FileMode.Create)) { await file.CopyToAsync(fileStream); } size += file.Length; } string message = $"{files.Count} file(s) / {size} bytes uploaded successfully!"; return Json(message); } return View(nameof(Index),ufv); } } |
Контроллер Home, представляет действие, которое обрабатывает POST-запрос, отправленный на сервер с целью загрузки одного или нескольких файлов. Код использует аннотации и инъекцию зависимостей для обеспечения безопасности и доступа к окружению приложения.
Атрибут [HttpPost] указывает, что данное действие должно обрабатывать только POST-запросы.
Атрибут [AutoValidateAntiforgeryToken] обеспечивает защиту от атак CSRF (межсайтовой подделки запроса) путем автоматической проверки токена антифоргери. Этот токен генерируется во время формирования HTML-форм на клиентской стороне и должен совпадать с ожидаемым значением на сервере.
Интерфейс IWebHostEnvironment предоставляет информацию об окружении приложения, включая путь к корневой папке веб-хостинга, где расположены статические файлы и другая информация.
В папке Views / Home, изменим содержимое представления Index.cshtml, следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
@using MultipleFileUploader.ViewModels; @{ ViewData["Title"] = "File Uploader"; } @model UploadFileViewModel @section Styles{ <link rel="stylesheet" href="~/css/formUploader.css" /> } <div class="h-100 d-flex align-items-center justify-content-center"> <div class="files-container"> <form asp-controller="Home" asp-action="UploadFiles" method="post" enctype="multipart/form-data"> <div class="upload"> <label asp-for="Uploads"></label> <input asp-for="Uploads" class="form-control" onchange="displayNames(this, 'names')" /> <ul id="names" class="d-flex justify-content-start flex-wrap"></ul> <span asp-validation-for="Uploads" class="text-danger"></span> </div> @Html.AntiForgeryToken() <button type="submit" class="btn btn-primary">Upload</button> </form> </div> </div> @section Scripts{ <script src="~/js/formUploader.js"></script> @*To validate the model on the client*@ @await Html.PartialAsync("_ValidationScriptsPartial") } |
Это представление представляет собой страницу с формой для загрузки файлов и использует модель представления UploadFileViewModel для обработки этих данных на сервере. Оно также подключает стили и скрипты, которые управляют отображением и взаимодействием элементов страницы.
Запустим приложение и проверим его работу.
Я надеюсь, что вам понравилось читать эту статью, и она оказалась легкой для понимания. Пожалуйста, дайте мне знать, если у вас есть какие-либо комментарии или исправления.
Так же вам может быть интересна предыдущая статья — Bulk Operations в Entity Framework Core.
Вы хотите научится писать код на языке программирования C#?
Создавать различные информационные системы, состоящие из сайтов, мобильных клиентов, десктопных приложений, телеграмм-ботов и т.д.
Переходите к нам на страницу Dijix и ознакомьтесь с условиями обучения, мы специализируемся только на индивидуальных занятиях, как для начинающих, так и для более продвинутых программистов. Вы можете взять как одно занятие для проработки интересующего Вас вопроса, так и несколько, для более плотной работы. Благодаря личному кабинету, каждый студент повысит качество своего обучения, в вашем распоряжении:
- Доступ к пройденному материалу
- Тематические статьи
- Библиотека книг
- Онлайн тестирование
- Общение в закрытых группах
Живи в своем мире, программируй в нашем.