HTML réalise un clic pour télécharger les fichiers directement-tutoriel HTML-php.cn

HTML réalise un clic pour télécharger les fichiers directement

王林

Libérer： 2020-03-03 17:58:43

avant

11265 Les gens l'ont consulté

HTML réalise un clic pour télécharger les fichiers directement

1. Utilisez la balise

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

Copier après la connexion

pour que lorsque l'utilisateur ouvre le navigateur et clique sur le lien, le fichier sera affiché. être 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" ;

(tutoriel d'apprentissage recommandé : tutoriel d'introduction HTML)

L'exemple est le suivant :

Déplacer à la balise Vous pouvez afficher le chemin du fichier et compléter le chemin du fichier en fonction de l'invite du chemin

<!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 ce qui suit méthode :

Obtenez le nom de domaine de l'hôte :

location.hostname

Obtenez 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

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

Pour plus de contenu lié à la programmation, veuillez prêter attention à la colonne Introduction à la programmation du site Web PHP chinois !

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!