本文摘自PHP中文网,作者V,侵删。
1、使用<a>标签
1 | < a href = "/user/test/xxxx.txt" download = "文件名.txt" >点击下载</ a >
|
这样当用户打开浏览器点击链接的时候就会直接下载文件。
但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添加一个属性“download”;
(推荐学习教程:html入门教程)
实例如下:
移到标签<a>标签上可以显示文件路径,根据路径提示进行文件路径的补全
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title ></ title >
</ head >
< body >
< a href = "321.png" download = "test.png" >点击下载</ a >
</ body >
</ html >
|
若需从网页上传的图片中进行下载,可能会用到以下方法:
获取主机域名:
location.hostname
获取端口号:
location.port
2、使用按钮进行监听
按钮监听又可以分为两种方法,
一是window.open()
1 2 3 4 5 6 7 | var $eleBtn1 = $( "#btn1" );
var $eleBtn2 = $( "#btn2" );
$eleBtn1.click( function (){
window.open( "https://codeload.github.com/douban/douban-client/legacy.zip/master" );
});
|
二是表单提交
1 2 3 4 5 6 7 8 | $eleBtn2.click( function (){
var $eleForm = $( "<form method='get'></form>" );
$eleForm.attr( "action" , "https://codeload.github.com/douban/douban-client/legacy.zip/master" );
$(document.body).append($eleForm);
$eleForm.submit();
});
|
更多编程相关内容,请关注php中文网编程入门栏目!
以上就是html实现点击直接下载文件的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
Html如何让表格居中
怎样给Html元素设置焦点
Html中表格form相关的知识讲解(代码示例)
Html的<time>标签是啥子,有用吗?
Html的<select> 标签
Html脚本javascript的功能
Html怎样使文字居中
Html基础:文档与网站架构
怎么打开Html网页
Html dl标签作用是什么?Html dl标签的属性介绍和使用方法详解
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html实现点击直接下载文件