html realizes click to download files directly-HTML Tutorial-php.cn

html realizes click to download files directly

王林

Release： 2020-03-03 17:58:43

forward

11387 people have browsed it

html realizes click to download files directly

1. Use the tag

<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>

Copy after login

so that when the user opens the browser and clicks the link, the file will be downloaded directly.

But there is a situation, such as txt, png, jpg and other files that the browser supports direct opening will not perform the download task, but will open the file directly. At this time, you need to add an a tag Attribute "download";

The example is as follows:

Move to the label label You can display the file path and complete the file path according to the path prompt

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
    </head>  
    <body>  
        <a href="321.png" download="test.png">点击下载</a>    
    </body>  
</html>

Copy after login

If you need to download from the image uploaded on the web page, you may use the following method:

Get the host domain name:

location.hostname

Get the port number:

location.port

2. Use the button to listen

Button monitoring can be divided into two methods,

The first is window.open()

var $eleBtn1 = $("#btn1");  
        var $eleBtn2 = $("#btn2");  
        //已知一个下载文件的后端接口：https://codeload.github.com/douban/douban-client/legacy.zip/master  
        //方法一：window.open()  
        $eleBtn1.click(function(){  
            window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");  
        });

Copy after login

The second is form submission

//方法二：通过form  
        $eleBtn2.click(function(){  
            var $eleForm = $("<form method=&#39;get&#39;></form>");  
            $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");  
            $(document.body).append($eleForm);  
            //提交表单，实现下载  
            $eleForm.submit();  
        });

Copy after login

For more programming related content, please pay attention PHP Chinese website Introduction to Programming column!

The above is the detailed content of html realizes click to download files directly. For more information, please follow other related articles on the PHP Chinese website!