码迷,mamicode.com
首页 > 其他好文 > 详细

文件下载

时间:2014-11-07 16:15:52      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   color   ar   使用   sp   for   文件   

  今天在项目中遇到了一个问题,本来在a标签的href中有下载文件的地址,但是点击无效,经定位发现原来是js脚本中将所有的a标签的默认行为阻止了,a标签的点击事件了调用了e.preventDefault();故在此总结下。

文件下载常用的两种方式

  1. 通过a标签,href直接指向服务器的文件地址

  <a id= "download" href="upload.txt"></a>下载

 

  2.通过后端服务下载文件

  <a id= "download" href="/service/upload?id=123"></a>下载

 

  针对第一种情况,如果该页面中阻止了a标签的默认行为那该怎么办呢?

  通常大家会想到使用window.open方法,给下载按钮添加点击事件 调用window.open("文件地址");没错,这样确实可以,但是点击后会新开一个空窗口,那怎么实现不新开窗口呢?

  在w3cSchool上发现 window.open(URL,name,features,replace) 中的第二个参数 是一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。那么就可以在当前页面中添加一个iframe 就可以实现

<iframe name="downloadWnd" style="height:0;width:0"></iframe>

$("#download").click(function(e){

  window.open("要下载的文件地址","downloadWnd");

});

由此我想到了另外一种使用场景--页面文件无刷新上传,文件上传一般通过form表单上传

<iframe name="uploadWnd" style="height:0;width:0"></iframe>

<form action="/service/upload/" target="uploadWnd" enctype="multipart/form-data">

  <input name="file" type="file"/>

  <input type="submit"/>

</form>

 

文件下载

标签:style   http   io   color   ar   使用   sp   for   文件   

原文地址:http://www.cnblogs.com/rsky/p/4081281.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!