首页 > web前端 > js教程 > 正文

有关在js中下载文件简单操作(附上代码,详细解答)

亚连
发布: 2018-05-18 10:25:30
原创
2429人浏览过

下面是我给大家整理的在js中下载文件简单操作,有兴趣的同学可以去看看。

一般下载 
例如要下载文件的地址为:htpp://127.0.0.1/test.rar

//该方法在火狐上没有效果的,在IE浏览器上是可以的window.open("htpp://127.0.0.1/test.rar");
//该方法火狐有些版本是不支持的window.location.href="htpp://127.0.0.1/test.rar";
//为了解决火狐有些版本不支持,可以改成这种方式window.location="htpp://127.0.0.1/test.rar"; 
//该方法IE和火狐都可以,
//url表示要下载的文件路径,如:
htpp://127.0.0.1/test.rar
function downloadFile(url) {   
   try{ 
        var elemIF = document.createElement("iframe");   
        elemIF.src = url;   
        elemIF.style.display = "none";   
        document.body.appendChild(elemIF);   
    }catch(e){ 
        zzrw.alert("下载异常!");
    }     
}
//表单方式直接下载文件
//url表示要下载的文件路径,如:
htpp://127.0.0.1/test.rar
function downloadFile(url)
{
    var form=$("<form>");//定义form表单,通过表单发送请求
    form.attr("style","display:none");//设置为不显示
    form.attr("target","");
    form.attr("method","get");//设置请求类型  
    form.attr("action",url);//设置请求路径
    $("body").append(form);//添加表单到页面(body)中
    form.submit();//表单提交
}1234567891011121314151617181920212223242526272829303132333435363738394041424344
登录后复制

不跳转页面请求后台下载,后台返回一个数据流,可通过表单实现 
如下:

JQuery的ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form,用这个form提交参数,并返回“流”类型的数据。在实现过程中,页面也没有进行刷新。

get请求下载

//url表示请求路径,进入后台处理,后台返回一个文件流//例如:url为htpp://127.0.0.1/test
function downloadFile(url){
    //定义一个form表单,通过form表单来发送请求
    var form=$("<form>");    //设置表单状态为不显示
    form.attr("style","display:none");    //method属性设置请求类型为get
    form.attr("method","get");    //action属性设置请求路径,(如有需要,可直接在路径后面跟参数)
    //例如:htpp://127.0.0.1/test?id=123
    form.attr("action",url);    //将表单放置在页面(body)中
    $("body").append(form);    //表单提交
    form.submit();
}12345678910111213141516171819202122232425262728
登录后复制

post请求下载

//url表示请求路径,进入后台处理,后台返回一个文件流
//例如:url为htpp://127.0.0.1/test
function downloadFile(url){
//定义一个form表单,通过form表单来发送请求
var form=$("<form>");
//设置表单状态为不显示
form.attr("style","display:none");
//method属性设置请求类型为post
form.attr("method","post");
//action属性设置请求路径,
//请求类型是post时,路径后面跟参数的方式不可用
//可以通过表单中的input来传递参数
form.attr("action",url);
$("body").append(form);//将表单放置在web中
//在表单中添加input标签来传递参数
//如有多个参数可添加多个input标签
var input1=$("<input>");
input1.attr("type","hidden");//设置为隐藏域
input1.attr("name","id");//设置参数名称
input1.attr("value","123");//设置参数值
form.append(input1);//添加到表单中
form.submit();//表单提交
}
登录后复制

上面是我整理给大家的在js中下载文件简单操作,希望今后会对大家有帮助。

相关文章:

代码小浣熊
代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手,覆盖软件需求分析、架构设计、代码编写、软件测试等环节

代码小浣熊 51
查看详情 代码小浣熊

在 js中function前面加!方面的问题,代码附上

详细讲解JS和app交互的方式(代码附上 )

详细讲解Js apply()使用(含有代码)

以上就是有关在js中下载文件简单操作(附上代码,详细解答)的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号