Example of how to click to download a file on an HTML page-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Example of how to click to download a file on an HTML page

小云云

Mar 03, 2018 am 10:02 AM

html download document

1. Use the tag to complete

<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 following is an example

Move to the label label to 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 a picture uploaded on a web page, you may use the following method

Get the host domain name:

location.hostname

Get the port number:

location.port

2. Use buttons to monitor

Button monitoring can be divided into two methods,

One 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

Related recommendations:

php implements the example code of clicking the download file on the current page

The above is the detailed content of Example of how to click to download a file on an HTML page. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn