如何用jQuery根据文件扩展名修改子div的style属性替换特定缩略图

这个问题我之前也碰到过，MIME类型识别确实会把Sketch、PSD这类内置图片预览的设计文件和普通JPG/PNG归为一类，导致缩略图显示不准确。不过通过文件扩展名来针对性修改对应子div的style属性，就能轻松解决这个问题，下面是具体实现步骤：

1. 明确HTML结构前提 #

假设你的文件目录项HTML结构大致如下（可以根据你实际的结构调整选择器）：

<div class="file-item" data-filename="design.sketch">
  <div class="thumbnail"></div> <!-- 需要修改style的子div -->
  <span class="filename">design.sketch</span>
</div>
<div class="file-item" data-filename="mockup.psd">
  <div class="thumbnail"></div>
  <span class="filename">mockup.psd</span>
</div>

2. JavaScript实现逻辑 #

通过JS遍历所有文件项，提取扩展名后替换对应缩略图的背景图样式：

// 遍历所有文件条目
document.querySelectorAll('.file-item').forEach(fileItem => {
  // 获取文件名：优先取data属性（更可靠），没有的话取文件名文本
  const fileName = fileItem.getAttribute('data-filename') || fileItem.querySelector('.filename').textContent.trim();
  // 提取文件扩展名并转为小写（兼容大小写不同的情况，比如.SKETCH/.PSD）
  const fileExt = fileName.split('.').pop().toLowerCase();
  
  // 找到需要修改的缩略图子div
  const thumbnailElem = fileItem.querySelector('.thumbnail');
  
  // 根据扩展名替换样式
  switch(fileExt) {
    case 'sketch':
      thumbnailElem.style.backgroundImage = 'url("assets/thumbnails/sketch-icon.png")';
      thumbnailElem.style.backgroundSize = 'cover';
      thumbnailElem.style.backgroundPosition = 'center';
      break;
    case 'psd':
      thumbnailElem.style.backgroundImage = 'url("assets/thumbnails/psd-icon.png")';
      thumbnailElem.style.backgroundSize = 'cover';
      thumbnailElem.style.backgroundPosition = 'center';
      break;
    // 其他类型保持原有缩略图，不需要处理
    default:
      break;
  }
});

3. 关键注意事项 #

• 路径正确性：确保自定义缩略图的路径是正确的，相对路径要基于当前HTML文件的位置，绝对路径直接填写完整URL即可。
• 动态加载兼容：如果你的文件目录是通过AJAX动态加载的，需要在文件内容加载完成后再执行这段JS代码，或者使用事件委托监听新添加的文件项。
• 样式覆盖：如果原有缩略图div有默认的background-image或其他样式，要确保新设置的样式优先级足够（比如可以给自定义样式加!important，或者调整CSS选择器权重）。
• 扩展名容错：如果遇到没有扩展名的文件，split('.').pop()会返回整个文件名，所以可以在代码里加个判断，确保只有包含.的文件才处理扩展名。

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