怎么识别这个下载文件的格式和大小的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>判断识别文件格式和大小</title>
</head>
<body>
<ul class="download-list">
<li class="top">
<span>文件名称</span>
<span>下载格式</span>
<span>文件大小</span>
</li>
<li class="">
<span class="title tip">111</span>
<span>PDF</span>
<span>235.6kb</span>
<span><a href="1111.pdf" class="btn" target="_blank">下载</a></span>
</li>
<li class="">
<span class="title tip">222</span>
<span>PDF</span>
<span>205.2kb</span>
<span><a href="222.pdf" class="btn" target="_blank">下载</a></span>
</li>
</ul>
</body>
</html>
以下是一个简单的示例代码，可以识别下载文件的格式和大小，并将其封装为可执行的HTML：
<!DOCTYPE html>
<html>
<head>
<title>Download File</title>
<script>
function downloadFile() {
var url = document.getElementById("url").value;
var xhr = new XMLHttpRequest();
xhr.open('HEAD', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var contentDisposition = xhr.getResponseHeader('Content-Disposition');
var contentType = xhr.getResponseHeader('Content-Type');
var contentLength = xhr.getResponseHeader('Content-Length');
var fileName = '';
if (contentDisposition) {
var fileNameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/i);
if (fileNameMatch != null && fileNameMatch[1]) {
fileName = fileNameMatch[1].replace(/['"]/g, '');
}
}
if (!fileName) {
fileName = url.split('/').pop();
}
var fileSize = '';
if (contentLength) {
var size = parseInt(contentLength);
if (size >= 1024 * 1024) {
fileSize = (size / (1024 * 1024)).toFixed(2) + ' MB';
} else if (size >= 1024) {
fileSize = (size / 1024).toFixed(2) + ' KB';
} else {
fileSize = size + ' bytes';
}
}
var link = document.createElement('a');
link.href = url;
link.download = fileName;
link.innerHTML = fileName + ' (' + contentType + ', ' + fileSize + ')';
document.getElementById('download').appendChild(link);
} else {
alert('Failed to download file');
}
}
};
xhr.send();
}
</script>
</head>
<body>
<label for="url">Enter file URL:</label>
<input type="text" id="url" name="url">
<button onclick="downloadFile()">Download</button>
<div id="download"></div>
</body>
</html>
在这个示例中，我们使用XMLHttpRequest对象来发送HEAD请求，以获取文件的元数据，例如文件名，大小和类型。然后，我们将这些元数据封装在一个链接元素中，以便用户可以单击该链接来下载文件。