Maison >interface Web >tutoriel HTML >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:563234parcourir
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='get'></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!