Skip to content

Загрузка файлов перетаскиванием в Asp.Net Core

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...

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

Попробуйте свои силы в игре, где ваши навыки программирования на 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, со следующим содержимым:

Для чтения входных файлов и обновления их содержимого с указанием имен файлов, необходимо написать немного JavaScript кода. В папку wwwroot / js, добавим файл formUploader.js, со следующим содержимым:

В этом приложении мы будем использовать валидацию данных на стороне клиента

Клиентская валидация позволяет проверить введенные пользователем данные на стороне клиента (веб-браузера) до того, как данные будут отправлены на сервер. Это может быть полезным для обеспечения более быстрой обратной связи пользователю и снижения нагрузки на сервер, так как некоторые простые проверки могут быть выполнены без отправки данных на сервер.

Откроем файл Views / Shared / _ValidationScriptsPartial.cshtml и изменим его содержимое следующим образом:

В проекте нашего типа, по умолчанию уже определены все необходимые скрипты для валидации данных на стороне клиента.

Первоначальная настройка завершена.

Модель представления

Ради повышения удобства работы с приложением в процессе загрузки и обработки файлов, определим в корне папку ViewModels, в которую добавим класс UploadFileViewModel.cs, со следующим содержимым:

Данный класс содержит коллекцию загружаемых файлов и атрибуты валидации.

Контроллер и представления

Перейдем в контроллер Home и изменим его содержимое следующим образом:

Контроллер Home, представляет действие, которое обрабатывает POST-запрос, отправленный на сервер с целью загрузки одного или нескольких файлов. Код использует аннотации и инъекцию зависимостей для обеспечения безопасности и доступа к окружению приложения.

Атрибут [HttpPost] указывает, что данное действие должно обрабатывать только POST-запросы.

Атрибут [AutoValidateAntiforgeryToken] обеспечивает защиту от атак CSRF (межсайтовой подделки запроса) путем автоматической проверки токена антифоргери. Этот токен генерируется во время формирования HTML-форм на клиентской стороне и должен совпадать с ожидаемым значением на сервере.

Интерфейс IWebHostEnvironment предоставляет информацию об окружении приложения, включая путь к корневой папке веб-хостинга, где расположены статические файлы и другая информация.

В папке Views / Home, изменим содержимое представления Index.cshtml, следующим образом:

Это представление представляет собой страницу с формой для загрузки файлов и использует модель представления UploadFileViewModel для обработки этих данных на сервере. Оно также подключает стили и скрипты, которые управляют отображением и взаимодействием элементов страницы.

Запустим приложение и проверим его работу.

Я надеюсь, что вам понравилось читать эту статью, и она оказалась легкой для понимания. Пожалуйста, дайте мне знать, если у вас есть какие-либо комментарии или исправления.

Так же вам может быть интересна предыдущая статья — Bulk Operations в Entity Framework Core.


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

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

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

  • Доступ к пройденному материалу
  • Тематические статьи
  • Библиотека книг
  • Онлайн тестирование
  • Общение в закрытых группах

https://dijix.com.ua

Живи в своем мире, программируй в нашем.


 

Published inAsp.Net Core
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x