在Ajax上成功下载.mp3或.zip文件

在用户填写电子邮件validation表单（通过AJAX提交）后，如果AJAX调用响应成功，我想强制下载在当前浏览器窗口中启动。

电子邮件validation表格如下：

  
  Download!   

单击“download_email_button”后的js / jquery如下所示：

 $("#download_email_button").click(function() { var action = $("#form_download_email").attr('action'); var form_data = {email: $("#download_email").val()}; $.ajax({ type: "POST", url: action, data: form_data, success: function(response){ if(response == 'success'){ window.location.assign('URL to .mp3 or ZIP'); } } }); }); 

响应==’成功’块进入，现在我发现强制下载文件但没有启动弹出窗口（通过window.open – 无论如何被Chrome阻止）的唯一解决方案是使用窗口.location.assign如上所示。 这是通过JS强制下载文件的正确方法吗？

但是，使用window.location.assign方法我只能下载1个文件，如果我尝试用两个mp3放入两行，它就不起作用了。 又名：

 window.location.assign('http://song1.mp3'); window.location.assign('http://song2.mp3'); 

我不希望用户在提交表单后必须单击另一个链接才能下载.mp3 / .zip，我想尝试在JS / jQuery中完成所有操作。

我想到的最后一个方法是响应==’成功’让浏览器点击文件上的两个隐藏标签，这些标签的href指向mp3。 但是，似乎“问题是你无法通过点击”触发链接的默认操作“jquery，只有onclick属性。

我应该用js这样做吗？ 如果没有办法做到这一点，我应该尝试像PHP这样的东西吗？

关于我当前的方式的任何建议或如何下载多个mp3文件的建议将是有帮助的！

Answer 1

为每个url创建一个iframe下载并将iframe的源设置为文件url 🙂

 var urls = ['url_1.mp3', 'url_2.mp3', /* ... , */ 'url_N.mp3'], doLoad = function(url){ $("") .css("display", "none") .bind("load", function(e){ this.src == url && $(this).remove(); }) .attr("src", url) .appendTo($(document.body)); }; for( var i=0; i < urls.length; i++ ) { doLoad( urls[i] ); }