Maison > Article > interface Web > HTML réalise un clic pour télécharger les fichiers directement
HTML réalise un clic pour télécharger les fichiers directement
- 王林avant
- 2020-03-03 17:58:4311255parcourir
1. Utilisez la balise 3499910bf9dac5ae3c52d5ede7383485
<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>
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 3499910bf9dac5ae3c52d5ede7383485 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>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");
});L'autre est 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();
});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!