Extensive file download on website

0

I have the following problem: In a website that I developed for a client, it contains a page for downloading audio, follows code for downloading the audio:

<a href="<?php print base_url(); ?>web_files/uploads/radio/<?php echo $audios->audio; ?>" download="<?php echo $audios->nome; ?>" target="_blank">
<button class="btn botoes_play_ouvir botao_saber_associacao">
<p>Baixar</p>
</button>
</a>

The problem is that on the page, it contains about 20 files in list format for download and files range from 5 to 18MB. When I click on download, the website is processing, as if it wanted to run the audio instead of downloading.

Would anyone have any tips on how I can improve this?

If you would like to view the problem, follow the link on the website: Click here

    
asked by anonymous 04.04.2016 / 14:48

2 answers

2

You can order the download by JS is very simple

Code JavaScript

function saveAs(url) {    
var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var a = document.createElement('a');
a.href = window.URL.createObjectURL(xhr.response);
a.download = filename; 
a.style.display = 'none';
document.body.appendChild(a);
a.click();
delete a;
};
xhr.open('GET', url);
xhr.send();
}

And here, to download the file.

  <a href="javascript:" onclick="saveAs(<?php print base_url(); ?>web_files/uploads/radio/<?php echo $audios->audio; ?>)"><?php echo $audios->nome; ?></a>

If it does not work as usual.

    
04.04.2016 / 15:01
0

According to Victor Gomes' solution, the final code follows:

<div onclick="saveAs('<?php print base_url(); ?>web_files/uploads/radio/<?php echo $audios->audio; ?>')">
   <button class="btn botoes_play_ouvir botao_saber_associacao">
      <p>Baixar</p>
   </button>
</div>


This code was originally posted by the author in question as final release of the solution, therefore, converted into a response

    
13.04.2017 / 14:59