如何用JavaScript获取下载链接文件大小并实现悬浮弹窗展示

当然可以实现！我来一步步教你搞定这个需求——当鼠标悬浮在下载链接上时，弹出模态框展示对应文件的大小。核心思路是用HEAD请求获取文件的响应头信息（不用下载整个文件，效率很高），然后解析出文件大小并展示。

步骤拆解&代码实现 #

首先，咱们先准备基础的HTML结构，包括下载链接和用来显示大小的模态框：

<!-- 下载链接示例 -->
<a href="path/to/your/file.pdf" class="download-link">下载PDF文件</a>
<a href="path/to/your/video.mp4" class="download-link">下载视频文件</a>

<!-- 悬浮模态框，默认隐藏 -->
<div id="file-size-modal" style="display: none; position: absolute; padding: 8px 12px; background: #333; color: white; border-radius: 4px; z-index: 9999;">
</div>

然后写JavaScript逻辑，实现悬浮监听、请求文件大小、显示模态框的功能：

const modal = document.getElementById('file-size-modal');
const downloadLinks = document.querySelectorAll('.download-link');

// 把字节数转换成易读的单位（KB/MB/GB）
function formatFileSize(bytes) {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// 处理鼠标悬浮事件
downloadLinks.forEach(link => {
  link.addEventListener('mouseover', async (e) => {
    const url = link.href;
    try {
      const response = await fetch(url, { method: 'HEAD' });
      
      // 检查是否获取到Content-Length
      if (!response.headers.has('Content-Length')) {
        modal.textContent = '无法获取文件大小';
      } else {
        const fileSizeBytes = parseInt(response.headers.get('Content-Length'));
        modal.textContent = `文件大小：${formatFileSize(fileSizeBytes)}`;
      }
      
      // 把模态框定位到鼠标附近
      modal.style.left = `${e.pageX + 10}px`;
      modal.style.top = `${e.pageY + 10}px`;
      modal.style.display = 'block';
    } catch (error) {
      modal.textContent = '获取文件大小失败';
      modal.style.left = `${e.pageX + 10}px`;
      modal.style.top = `${e.pageY + 10}px`;
      modal.style.display = 'block';
      console.error('请求出错:', error);
    }
  });

  // 鼠标移出时隐藏模态框
  link.addEventListener('mouseout', () => {
    modal.style.display = 'none';
  });
});

关键注意事项 #

• 跨域问题：如果下载链接是其他域名的资源，目标服务器必须配置CORS允许HEAD请求，否则浏览器会阻止这个请求，导致无法获取文件大小。
• Content-Length缺失：有些动态生成的下载链接（比如后端实时生成的文件），服务器可能不会返回Content-Length响应头，这时候就只能提示用户无法获取大小了。
• 请求缓存：浏览器会缓存HEAD请求的结果，所以同一个链接多次悬浮不会重复发送请求，性能没问题。

这样就能完美实现你要的功能啦！

内容的提问来源于stack exchange，提问作者kaaris