Maison > Article > interface Web > Deux façons d'implémenter des fichiers cliquer pour télécharger sur les pages HTML
Deux façons d'implémenter des fichiers cliquer pour télécharger sur les pages HTML
- 不言original
- 2018-06-05 11:51:504082parcourir
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 compléter
<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 "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 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");
});
La seconde est la soumission du 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();
});
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!