Deux façons d'implémenter des fichiers cliquer pour télécharger sur les pages HTML-tutoriel HTML-php.cn

Deux façons d'implémenter des fichiers cliquer pour télécharger sur les pages HTML

不言

Libérer： 2018-06-05 11:51:50

original

4153 Les gens l'ont consulté

Cet article présente principalement deux façons d'implémenter des fichiers en cliquant pour télécharger sur des pages HTML. Les amis dans le besoin peuvent s'y référer

1. Utilisez la balise compléter

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

Copier après la connexion

De cette façon, lorsque l'utilisateur ouvre le navigateur et clique sur le lien, le fichier sera téléchargé directement.

Mais il existe une situation, telle que les fichiers txt, png, jpg et autres que le navigateur prend en charge pour ouvrir directement, n'effectuera pas la tâche de téléchargement, mais ouvrira le fichier directement à ce moment-là, dont vous avez besoin. pour ajouter un attribut "download" ;

Ce qui suit est un exemple

Déplacer vers l'étiquette le chemin du fichier, suivez les invites de chemin. Achèvement du chemin du fichier

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

Copier après la connexion

Si vous devez télécharger à partir de l'image téléchargée sur la page Web, vous pouvez utilisez la méthode suivante

pour obtenir le nom de domaine hôte :

location.hostname

Obtenir le numéro de port :

location.port

2. Utilisez le bouton pour écouter

La surveillance des boutons peut être divisée en deux méthodes,

L'une est 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");  
        });

Copier après la connexion

La seconde est la soumission du formulaire

//方法二：通过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();  
        });

Copier après la connexion

Recommandations associées :

Introduction à l'utilisation des ancres (ancres nommées) dans les pages Web html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!