如何在 JavaScript 中修剪文件名的长度但保留扩展名？

Question

例如，我有一些文件上传到我的服务器，名称很大，如下所示：

1507633_519504261504361_1763887042_n.jpg

在这种情况下，显示长度太长，弄乱了页面的格式。我希望对其进行修剪以保留前几个字符（例如前 10 个），但仍保留末尾的 .jpg，以便人们知道扩展名。

1507633_519504261504361_1763887042_n.jpg (before)

1507633_51.jpg (after)

有没有相对简单的方法来做到这一点？

Answer 1

好吧，您可以按点分割字符串，以将扩展名与文件名分开（假设您没有名称中包含

.

的文件）：

var split = initial.split('.');
var filename = split[0];
var extension = split[1];

然后，缩短文件名的长度：

if (filename.length > 10) {
    filename = filename.substring(0, 10);
}

最后，将它们连接在一起。

var result = filename + '.' + extension;

编辑：这是纯 JavaScript，不需要 jQuery。

Answer 2

修剪文件名，如果您有带有文件名的元素列表，然后将扩展名与修剪文件名连接

    <script src="js/jquery.js"></script>
    <script>
     $(document).ready(function(){
                    $('.uploadFilesItemHeader').find('#fileName').each(function() {
                    var fileNames = this.innerText;
                    var leftRightStrings = fileNames.split('.');
                    //file name
                    var fName = leftRightStrings[0];
                    //file extension
                    var fExtention = leftRightStrings[1];
                    var lengthFname = fName.length;
                    //if file name without extension contains more than 15 characters   
                    if(lengthFname > 15){
                        $(this).html(fName.substr(0,10) + "..." + fName.substr(-5) + "." +fExtention);
                    }    
        }); 
}); 
    <script>

Answer 3

前端方法就是在中间放三个点。

function getFileName (str) {
  if (str.length > 22) {
    return str.substr(0, 11) + '...' + str.substr(-11)
  }

  return str
}

使用示例：

getFileName('calm-handsome-man-profile-modern-haircut-178790527.jpeg')

// Output:
// calm-handso...790527.jpeg

Answer 4

下面的函数删除所有长度为 25 个字符或更长的名称的中间部分，否则保留它们。您可以在这里轻松调整限制

• 这将返回扩展名之前的前 15 个字符，后跟 ... 以及扩展名之前的 3 个字符以及扩展名本身
• 这可以处理文件名中包含多个 .s 的情况

  function truncateMiddleOfLongFileNames(fileName) {
    let fileNameLength = fileName.length;

    if (fileNameLength < 25) {
      return fileName;
    } else {
      let extensionDelimiterIndex = fileName.lastIndexOf('.');
      let middleRemovedName = `${fileName.substring(0,15)}...${fileName.substring(extensionDelimiterIndex - 3)}`
      return middleRemovedName;
    }
  }

可以如下使用

fileName = 'this_is_too_long_and_i_need_to_fix_it.png';

shortenedFileName = truncateMiddleOfLongFileNames(fileName);

返回

'this_is_too_lon..._it.png'

Answer 5

var file_name = file.name;
var arr_filename = file_name.split('.');
var file_ex = arr_filename[ arr_filename.length-1  ];
if ( file_name.length > 14 ) {
   file_name = file_name.substr(0,7) + '...' + file_name.substr(-7);
}

回复中有错误。文件扩展名是数组中的最后一个元素，因为文件名中可能有几个点。

Answer 6

其他其他人没有处理多个“。”字符或文件格式超过 3 个，这在所有情况下都有效

  function truncateMiddleOfLongFileNames(fileName) {
  const filesizeLimit = 150;
  let name = fileName.split('.');
  let extension = name.pop();
  name = name.join('.');

  if (fileName.length < filesizeLimit) {
    return fileName;
  } else {
    let findSizeLimitExcludingExtension = filesizeLimit - extension.length;
    name = `${name.substring(0, findSizeLimitExcludingExtension - 1)}.${extension}`;
    return name;
  }
}

Answer 7

您想要完成的是将文件重命名为更短的名称。这将是 jQuery 不会与之关联的服务器端任务。您可以使用 AJAX 调用服务器端脚本来重命名、保存并发送回新文件名（然后您可以在 jQuery 中使用），但这是一个非常糟糕的主意。您最好在生成文件后重命名它们（无论它们来自何处），保存它们，然后直接在 HTML 中链接到新文件名。