如何在文件选择后显示图片或PDF标识？

核心思路 #

监听文件上传事件，通过判断文件MIME类型做分支处理：

• 图片类型（image/*）沿用原有FileReader逻辑生成预览图
• PDF类型（application/pdf）替换为预设的PDF图标显示

完整代码实现 #

1. HTML 结构

基于常见的上传/预览结构调整，保留核心控件：

<!-- 文件上传控件，限制仅允许图片和PDF -->
<input type="file" id="fileUpload" accept="image/*,.pdf">
<!-- 预览容器 -->
<div id="previewContainer" style="width: 200px; height: 200px; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center; margin-top: 10px;"></div>

2. JavaScript 逻辑

添加类型判断和预览渲染逻辑：

const fileUpload = document.getElementById('fileUpload');
const previewContainer = document.getElementById('previewContainer');

// 内嵌PDF图标（base64编码，无需外部资源）
const pdfIconBase64 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBkPSJNOC41IDJINmMtMS4xIDAtMiAxLjEtMiAyVjIyYzAgMS4xIDEuMSAyIDIgMmgxNmMxLjEgMCAyLTEuMSAyLTJWNGMwLTEuMS0xLjEtMi0yLTJIMTguNVYxSDguNVYyWiIgZmlsbD0iIzE0MzRDQyIvPgogIDxwYXRoIGQ9Ik0xNiA2SDEwVjE4aDZWNiIgZmlsbD0iI0VCNDk0QiIvPgogIDxwYXRoIGQ9Ik0xMiAxMmg0VjE2SDEyVjEyIiBmaWxsPSIjRUI0OTRCIi8+CiAgPHBhdGggZD0iTTEyIDZoNFYxMC41SDEyVjYiIGZpbGw9IiNFQjQ5NEIiLz4KICA8cGF0aCBkPSJNMTIgMTBoNFYxMi41SDEyVjEwIiBmaWxsPSIjRUI0OTRCIi8+CiAgPHBhdGggZD0iTTEyIDE0aDRWMTYuNUgxMlYxNCIgZmlsbD0iI0VCNDk0QiIvPgo8L3N2Zz4=';

fileUpload.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;

  // 清空预览区域
  previewContainer.innerHTML = '';

  if (file.type.startsWith('image/')) {
    // 图片文件：生成预览图
    const reader = new FileReader();
    reader.onload = function(event) {
      const img = document.createElement('img');
      img.src = event.target.result;
      img.style.maxWidth = '100%';
      img.style.maxHeight = '100%';
      previewContainer.appendChild(img);
    };
    reader.readAsDataURL(file);
  } else if (file.type === 'application/pdf') {
    // PDF文件：显示预设图标
    const pdfIcon = document.createElement('img');
    pdfIcon.src = pdfIconBase64;
    pdfIcon.alt = 'PDF文件';
    pdfIcon.style.width = '80px';
    pdfIcon.style.height = '80px';
    previewContainer.appendChild(pdfIcon);
  } else {
    // 其他不支持的文件类型提示
    previewContainer.textContent = '仅支持图片和PDF文件';
  }
});

3. 可选样式优化

给预览区域加基础交互效果：

#previewContainer {
  transition: border-color 0.3s;
}
#previewContainer:hover {
  border-color: #666;
}

关键说明 #

• 用file.type判断MIME类型比后缀名更可靠，同时配合accept属性限制上传范围
• PDF图标采用base64内嵌，避免外部资源依赖和跨域问题
• 完全兼容原有图片预览逻辑，仅新增PDF分支处理

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