Two ways to implement HTML page click download file
|
1. Use the <a> tag to complete <a href="/user/test/xxxx.txt" download="file name.txt">Click to download</a> In this way, when the user opens the browser and clicks the link, the file will be downloaded directly. However, there is a situation where, for example, files such as txt, png, jpg, etc. that the browser supports opening directly will not execute the download task, but will directly open the file. In this case, you need to add an attribute "download" to the a tag; The following is an example Move to the tag <a> to display the file path and complete the file path according to the path prompt.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="321.png" download="test.png">Click to download</a>
</body>
</html>If you need to download images uploaded from a web page, you may use the following methods Get the host domain name: location.hostname Get the port number: location.port 2. Use buttons for monitoring Button monitoring can be divided into two methods. One is window.open()
var $eleBtn1 = $("#btn1");
var $eleBtn2 = $("#btn2");
//A known backend interface for downloading files: https://codeload.github.com/douban/douban-client/legacy.zip/master
//Method 1: window.open()
$eleBtn1.click(function(){
window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");
});Second, form submission
//Method 2: Through 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);
//Submit the form to download $eleForm.submit();
});Summarize The above are two methods of implementing click-to-download files on HTML pages that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Let's learn about the MySQL storage engine
>>: Detailed explanation of the usage of the rare tags fieldset and legend
Recommend
Detailed steps for installing ros2 in docker
Table of contents Main topic 1. Install Docker on...
Detailed explanation of MySQL foreign key constraints
Official documentation: https://dev.mysql.com/doc...
How to change the domestic image source for Docker
Configure the accelerator for the Docker daemon S...
CentOS 7 set grub password and single user login example code
There are significant differences between centos7...
How to modify Flash SWF files in web pages
I think this is a problem that many people have en...
Detailed tutorial for upgrading MySQL 5.7.17 free installation version on Windows (x86, 64bit)
MySQL needs to be upgraded to version 5.5.3 or ab...
Detailed explanation of DOM style setting in four react components
1. Inline styles To add inline styles to the virt...
How to create a MySQL master-slave database using Docker on MacOS
1. Pull the MySQL image Get the latest MySQL imag...
How to play local media (video and audio) files using HTML and JavaScript
First of all, for security reasons, JavaScript ca...
How to uninstall Linux's native openjdk and install sun jdk
See: https://www.jb51.net/article/112612.htm Chec...
The button has a gray border that is ugly. How to remove it?
I used the dialog in closure and drew a dialog wit...
MySQL paging query method for millions of data volumes and its optimization suggestions
Database SQL optimization is a common problem. Wh...
Implementation of element shuttle frame performance optimization
Table of contents background Solution New Questio...
React implements multi-component value transfer function through conetxt
The effect of this function is similar to vue的pro...
10 Popular Windows Apps That Are Also Available on Linux
According to data analysis company Net Market Sha...