Maison > Article > interface Web > Exemple de comment cliquer pour télécharger un fichier sur une page HTML
Exemple de comment cliquer pour télécharger un fichier sur une page HTML
- 小云云original
- 2018-03-03 10:02:302073parcourir
1. Utilisez la balise pour compléter
<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>
afin que lorsque l'utilisateur ouvre le navigateur et clique sur le lien, le fichier soit téléchargé directement.
Mais il existe une situation, telle que les fichiers txt, png, jpg et autres, que le navigateur prend en charge. L'ouverture directe n'effectuera pas la tâche de téléchargement, mais ouvrira le fichier directement. À ce stade, vous devez l'ajouter. un attribut de balise "télécharger" ;
Ce qui suit est un exemple
Déplacé vers l'étiquette peut afficher le chemin du fichier et compléter le chemin du fichier en fonction de l'invite de chemin.
<!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 des images à partir de la page Web, vous pouvez utiliser la méthode suivante
pour obtenir le nom de domaine hôte :
location.hostname
pour obtenir le numéro de port :
location.port
2. Utilisez les boutons pour surveiller
La surveillance des boutons peut être divisée en deux méthodes,
L'un 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");
});
Le second 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 :
exemple de code php pour implémenter le clic -de télécharger des fichiers sur la page actuelle
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!