如何在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

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

Answer 3

修剪文件名，如果您具有带有文件名的元素列表，然后将带有修剪文件名的扩展名加入

    <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 4

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);
}