在 Ajax 成功时强制下载 .mp3 或 .zip 文件
Posted
技术标签:
【中文标题】在 Ajax 成功时强制下载 .mp3 或 .zip 文件【英文标题】:Force Download of .mp3 or .zip files on Ajax success 【发布时间】:2012-04-26 07:33:54 【问题描述】:用户填写电子邮件验证表(通过 AJAX 提交)后,如果 AJAX 调用响应成功,我想强制在当前浏览器窗口中开始下载。
电子邮件验证表如下所示:
<form id="form_download_email" method="POST" action="music_email_verification.php">
<input id="download_email" type="text" tabindex="1" /> <br/>
<a href="javascript:void(0);" id="download_email_button">
Download!
</a>
</form>
单击“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');
);
);
输入了 response=='success' 块,目前我发现的唯一解决方案是强制下载文件而不启动弹出窗口(通过 window.open - 无论如何都会被 Chrome 阻止),是使用 window.location.assign 如上所示。这是通过JS强制下载文件的正确方法吗?
但是,使用 window.location.assign 方法我只能下载 1 个文件,如果我尝试用两个 mp3 放入两行,它就不起作用。又名:
window.location.assign('http://song1.mp3');
window.location.assign('http://song2.mp3');
我不希望用户在提交表单后必须点击另一个链接来下载 .mp3/.zip,我想尝试在 JS/jQuery 中完成。
我想到的最后一个方法是在 response=='success' 上让浏览器点击文档上的两个隐藏标签,这些标签的 href 指向 mp3。但是,似乎“问题是您无法通过单击触发链接的默认操作”与 jquery,只是 onclick 属性。
我应该用 js 做这个吗?如果没有办法做到这一点,我应该尝试 PHP 之类的东西吗?
任何有关我当前执行方式的建议或有关如何下载多个 mp3 文件的建议都会有所帮助!
【问题讨论】:
也许打开一个新标签来下载? 【参考方案1】:为每个要下载的 url 创建一个 iframe,并将 iframe 的源设置为 files url :)
var
urls = ['url_1.mp3', 'url_2.mp3', /* ... , */ 'url_N.mp3'],
doLoad = function(url)
$("<iframe />")
.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] );
【讨论】:
我认为如果我将 1 个或多个 .zip 作为 url,这也会起作用? @alex: 我想是的 :),与 zip 文件相反,如果浏览器尝试播放它们而不是保存在磁盘上,mp3 文件可能会出现问题:)。以上是关于在 Ajax 成功时强制下载 .mp3 或 .zip 文件的主要内容,如果未能解决你的问题,请参考以下文章
有没有办法强制使用SoundCloud javascript流API的MP3块?
VbenAdmin(Vue)-- 下载文件功能(图片MP3/MP4)点击下载没有下载成功,反而打开了新窗口的问题