Blueimp jQuery File Upload：上传前重命名文件解决预览不一致问题

云原生阿岚

2026-5-25

解决Blueimp jQuery File Upload本地语言文件名上传后无法预览的问题

我之前也碰到过一模一样的坑——本地用中文/非ASCII字符命名的图片能正常预览，但上传后就打不开了，折腾了好一阵才挖到官方API里的这个解决方案，分享给你：

核心思路就是利用Blueimp提供的uploadName属性替代原文件名，因为原生File对象的name属性是只读的没法直接修改，但组件允许我们给单个文件设置这个自定义属性，上传时会自动用它替换原文件名。

直接上可用的代码示例：

$('#fileupload').fileupload({
  add: function(e, data) {
    // 遍历当前添加的所有文件
    data.files.forEach(function(file) {
      // 生成安全不重复的文件名：时间戳+随机字符串+原文件扩展名
      const timestamp = Date.now();
      const randomStr = Math.random().toString(36).substring(2, 8);
      // 提取原文件扩展名（兼容无扩展名的文件）
      const ext = file.name.split('.').pop() || '';
      const safeFileName = ext ? `${timestamp}-${randomStr}.${ext}` : `${timestamp}-${randomStr}`;
      
      // 给文件设置uploadName属性，上传时组件会用这个名字替代原name
      file.uploadName = safeFileName;
    });
    
    // 继续执行默认的文件添加流程
    data.submit();
  }
});

关键点说明：

安全文件名生成：时间戳+随机字符串的组合能最大程度避免文件名重复，同时保留原文件扩展名，确保文件类型识别正常。
uploadName属性：这是Blueimp组件官方提供的替代文件名机制，完全符合API规范，不用担心版本兼容问题。
灵活性调整：如果需要保留原文件名的部分信息（比如关键词），可以修改safeFileName的生成规则，比如把随机字符串换成原文件名的拼音/英文缩写。