How to access and download a file from a server using HTML 5

I am currently working on a site where users can upload binary media files (mainly .mp3). We need the “Download” method to save the file at the location you specified in the browser settings, and it needs to somehow display the progress bar.

Currently, all I'm worried about is finding a way to implement this using HTML5 and doing it in such a way that in future versions we can later access this stream so that as soon as we get this basic part of the download, we can how somehow implement a progress bar in the future.

I know that HTML5 has a File API, but very few browsers currently allow it, and we need this to work with IE 7+ and regularly used versions of Chrome and Firefox.

Thank you for your help!

+5
source share
3 answers

HTML5 supports the attribute download: http://webreflection.blogspot.com/2011/08/html5-how-to-create-downloads-on-fly.html

Example:

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

Clicking on this will allow the browser to handle the download (instead of opening the file using any application associated with the mimetype type), including a progress bar.

. , , . - , , . , "", "". , .

+4

, , <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>

, ...

+1

Just add the download attribute to your HTML5 anchor tag.

<a href="https://www.w3schools.com/images/picture.jpg" download>Download</a>
0
source

All Articles