Как получить доступ и загрузить файл с сервера, используя HTML 5

Question

В настоящее время я работаю над сайтом, с которого пользователи могут загружать двоичные медиафайлы (в основном .mp3).Нам нужен способ для кнопки «Загрузить», чтобы сохранить файл в указанном пользователем месте в настройках браузера, и он должен каким-то образом отображать индикатор выполнения.

В настоящее время все, что меня беспокоит, - это поискспособ реализовать это с помощью HTML5 и сделать это таким образом, чтобы в будущих версиях мы впоследствии могли получить доступ к этому потоку, чтобы после того, как мы получили код этой базовой части загрузки, мы могли каким-то образом реализовать индикатор выполнения в будущем.

Я знаю, что в HTML5 есть Файловый API, но в настоящее время очень немногие браузеры допускают его реализацию, и нам нужно, чтобы он работал на IE 7+ и регулярно используемых версиях Chrome и Firefox.

Спасибо за вашепомощь!

Answer 1

HTML5 поддерживает атрибут download: http://webreflection.blogspot.com/2011/08/html5-how-to-create-downloads-on-fly.html

Пример:

<a href="http://.../bad-romance.mp3" download="Bad Romance.mp3">Save "Bad Romance" to your computer</a>

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

Примечание : вы действительно хотите быть осторожными, чтобы не отклоняться от обычных ожиданий пользователя, пытаясь создать собственную реализацию.Это синоним принудительного открытия ссылки в новой вкладке - это может сбить пользователя с толку, если он ожидает одно поведение, но получает другое.В вашем случае попробуйте конкретно объяснить, что это будет ссылка «скачать», а не «игра».Приведенный выше пример делает это, но может также подойти значок «скачать».

Answer 2

Если вместо этого вы хотите сделать ссылку для загрузки кнопкой, вы можете просто поместить элемент <input> в <a>:

<a href="example.mp3" download="EnterSongNameHere.mp3">
  <input type="button" value="<!-- enter song name here -->" />
</a>

И вы также можете использовать DOM для динамического изменения href элемента. Пример из моего блога, где рассматриваемая кнопка загрузки - это кнопка «Сохранить как»:

<a id="downloadThisPage" download="OpenMe.html>
  <input type="button" value="See for yourself" />
</a>
<script type="text/javascript">
  document.getElementById("downloadThisPage").href = window.location.toString();
</script>

Надеюсь, это поможет ...