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

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

青灯夜游
青灯夜游avant
2018-10-08 17:21:563203parcourir

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 3499910bf9dac5ae3c52d5ede7383485 complet

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

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 3499910bf9dac5ae3c52d5ede7383485 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>

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");  
        });

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();  
        });

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer