Множественная загрузка файлов с ASP.NET MVC и HTML5

| Воскресенье, 17 февраля, 2013

Метки: ASP.NET MVC, HTML5 Комментарии: 0

В прежних версиях HTML не было возможности загружать на сайт сразу несколько файлов, для этого нужно было использовать сторонние компоненты, написанные на Flash, Silverlight и т.п., которые позволяли выводить диалоговое окно выбора нескольких файлов.

В HTML5 элемент input получил новый атрибут multiple, а с ним и новую возможность выбирать в диалоге сразу несколько файлов. Кроме того, для выбора файлов только определенного типа, введен еще один новый атрибут accept, который распознает MIME media types (стандарт описывающий передачу различных типов данных в интернете).

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

В HTML5 так может выглядеть код разметки для отправки файлов на сервер:

<form action="/files/upload" enctype="multipart/form-data" method="post">
   <label>Загрузка картинок:</label> 
   <input accept="image/*" id="File1" multiple="multiple" name="File1" type="file" /> 
   <input id="btnUpload" type="submit" value="Отправить" />
</form>

После нажатия на кнопку выбора файлов появится диалоговое окно, в котором можно выбрать сразу несколько файлов и загрузить их одним кликом.

Прием файлов на стороне сервера.

Когда файлы загружаются на сервер c ASP.NET MVC, то нужно помнить о следующих вещах. Если загрузка идет из одного элемента input, то файлам присваивается одно и то же имя. То есть нельзя получить файл по имени управляющего элемента input.

HttpPostedFileBase file = Request.Files["File1"];

Вместо этого можно выбрать все ключи файлов и через них же запрашивать файлы в виде HttpPostedFileBase.

[HttpPost]
public ActionResult Upload()
{
   foreach (string fileKey in this.Request.Files)
   {
      var file = this.Request.Files[fileKey] as HttpPostedFileBase;
      SaveFile(file.FileName, file.ContentType, file.InputStream);
   }
   return RedirectToAction("ToSomeAction");
}

Либо можно сделать еще проще, используя параметр в action-методе.

[HttpPost]
public ActionResult Upload(HttpPostedFileBase[] file1)
{
   foreach (var file in file1)
   {
      SaveFile(file.FileName, file.ContentType, file.InputStream);
   }
   return RedirectToAction("ToSomeAction");
}

Поддержка браузеров.

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

Атрибут multiple поддерживается в Internet Explorer 10 +, Firefox 3.6 +, Opera 11.0 +, Chrome 2.0 + и Safari.

Тут можно скачать и посмотреть работающий простой пример изложенного выше https://github.com/mazhekin/multi-file-upload-demo

Комментарии
Никто еще не оставил здесь комментарий.
Войдите, чтобы написать комментарий , или воспользуйтесь формой ниже.
 

Copyright © CodeHint.ru 2013-2019