Deux façons d'implémenter une page HTML en cliquant sur télécharger des fichiers-tutoriel HTML-php.cn

Deux façons d'implémenter une page HTML en cliquant sur télécharger des fichiers

青灯夜游

Libérer： 2018-10-08 17:21:55

avant

3218 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 complet

<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 a tag "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 utiliser la méthode suivante

pour obtenir le nom de domaine hôte :

location.hostname

Obtenez le numéro de port :

location.port

2. écouter

Bouton pour écouter Il peut être divisé 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

L'autre est la soumission de 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

Résumé

Ce qui précède sont les deux façons d'implémenter le clic -pour télécharger des fichiers sur les pages HTML introduits par l'éditeur, j'espère que cela sera utile à tout le monde !

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!