In fact, this article should be regarded as a "water" article. Why is it so "water"? In addition to the recent sultry climate in the south that needs to be cooled down, another main reason is that the codes written here are all written by CSDN. AI text The large model "C knows" is completed, I just record it briefly here, and it is also convenient for other students in need to learn from it, and avoid some detours (some detours still need to be detoured by yourself). CSDN's AI text large model was only launched a few months ago. I have experienced it several times and the effect is good. The answers to various technical questions are quite satisfactory, whether it is in the study or in the work process. It can help Many of us, thank you!
The author is from a C background, and the front-end content is only available online when there is a need for the project. Sometimes, for a question that may be relatively simple and popular, there is no suitable and satisfactory answer for reference after a lot of Baidu. Some articles and blogs are for These simple and popular questions also set various browsing restrictions. It is very inconvenient to join the membership or open VIP or pay attention to bloggers. ", the following content is an example, the last point still needs attention: although the wine is delicious, don't be greedy.
Implement an example of clicking a button to download a file
<!DOCTYPE html>
<html>
<head>
<title>文件下载示例</title>
</head>
<body>
<button onclick="downloadFile()">点击下载文件</button>
<script>
function downloadFile() {
// 创建一个虚拟的链接元素
var downloadLink = document.createElement('a');
downloadLink.href = 'path/to/your/file'; // 替换为你要下载的文件路径
// 设置下载文件的名称
downloadLink.download = 'filename.ext'; // 替换为你要下载的文件名称（包括扩展名）
// 触发点击事件进行下载
downloadLink.click();
}
</script>
</body>
</html>On the basis of the above, realize the function of clicking a button to download a file with a fixed suffix
<!DOCTYPE html>
<html>
<head>
<title>文件下载示例</title>
</head>
<body>
<button onclick="downloadFile()">点击下载文件</button>
<script>
function downloadFile() {
var fileUrl = 'path/to/your/file'; // 替换为你要下载的文件路径
var fileName = 'filename.ext'; // 替换为你要下载的文件名称（包括扩展名）
// 获取文件的后缀名
var fileExtension = fileName.split('.').pop();
// 判断文件后缀名是否符合条件（这里以 .dat 和 .txt 为例）
if (fileExtension === 'dat' || fileExtension === 'txt') {
// 创建一个虚拟的链接元素
var downloadLink = document.createElement('a');
downloadLink.href = fileUrl;
downloadLink.download = fileName;
downloadLink.click();
} else {
alert('只能下载 .dat 或者 .txt 文件');
}
}
</script>
</body>
</html>An example of clicking a button to download multiple files based on the above
<!DOCTYPE html>
<html>
<head>
<title>下载多个文件示例</title>
</head>
<body>
<h1>点击按钮同时下载多个文件</h1>
<button onclick="downloadFiles()">点击下载文件</button>
<script>
function downloadFiles() {
// 定义要下载的文件URL和名称
var files = [
{ url: 'path/to/file1.ext', name: 'filename1.ext' },
{ url: 'path/to/file2.ext', name: 'filename2.ext' },
// 添加更多文件...
];
// 创建一个隐藏的<a>元素并添加到页面中
var link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link);
// 循环遍历文件数组，并依次下载文件
for (var i = 0; i < files.length; i++) {
var file = files[i];
// 设置文件的URL和名称
link.href = file.url;
link.download = file.name;
// 模拟用户点击下载链接
link.click();
}
// 清理临时元素
document.body.removeChild(link);
}
</script>
</body>
</html>One thing to note is that if you build the WEB SERVER under embedded Linux, such as the porting of boa web server under the embedded Linux environment mentioned in my previous article, you need to modify the embedded The path corresponding to boa.conf in the environment,
For example, the corresponding content of my boa.conf is:
Alias /doc /mnt3/ga_syslog
Alias /ocr /mnt3/ga01_zynq_logYou can add multiple lines of Alias, similar to a typedef. When writing the path in html, it can be 'doc/xxx.log', 'ocr/xxx.log', etc., and then check after rebooting, otherwise the file cannot be downloaded.
On the basis of the above, an example of clicking a button to select a file to download in the file browsing window
<!DOCTYPE html>
<html>
<head>
<title>选择文件下载示例</title>
</head>
<body>
<button onclick="selectAndDownloadFile()">点击选择文件并下载</button>
<script>
function selectAndDownloadFile() {
// 创建一个虚拟的 input 元素
var fileInput = document.createElement('input');
fileInput.type = 'file';
// 监听文件选择事件
fileInput.onchange = function(event) {
var selectedFile = event.target.files[0];
// 创建一个虚拟的链接元素
var downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(selectedFile);
downloadLink.download = selectedFile.name;
// 触发点击事件进行下载
downloadLink.click();
// 清除临时的 URL 对象
URL.revokeObjectURL(downloadLink.href);
};
// 触发点击事件选择文件
fileInput.click();
}
</script>
</body>
</html>On the basis of the above, realize that only files with fixed suffixes can be displayed in the file window and selected for download
<!DOCTYPE html>
<html>
<head>
<title>选择指定后缀文件下载示例</title>
</head>
<body>
<button onclick="selectAndDownloadFile()">点击选择 .pdf 文件并下载</button>
<script>
function selectAndDownloadFile() {
// 创建一个虚拟的 input 元素
var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.pdf'; // 只接受 .pdf 文件，如多种后缀，可以以逗号分隔，如'.pdf,.dat'
// 监听文件选择事件
fileInput.onchange = function(event) {
var selectedFile = event.target.files[0];
// 创建一个虚拟的链接元素
var downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(selectedFile);
downloadLink.download = selectedFile.name;
// 触发点击事件进行下载
downloadLink.click();
// 清除临时的 URL 对象
URL.revokeObjectURL(downloadLink.href);
};
// 触发点击事件选择文件
fileInput.click();
}
</script>
</body>
</html>