Question

我希望在文件名（上传文件）太长时更改文件上传值。例如，如果文件名是“This_file_has_a_long_name.txt”，我希望用“This_file..name.txt”等有限字符显示它。

所以我尝试了以下但是没有用。请指教。

$("#file_browser").change(function()
{
  var filename = this.value;
  filename = filename.substr(0,10);
  alert(filename);
  document.getElementById("file_browse").value = filename;
});

Answer 1

试试这个：

注意：如果name的长度为14或更大，请更改它。

$(document).ready(function() {
        
        $("#file_browser").change(function() {
    
            var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
            //Or for full path use, var filename = $(this).val();
            
            var len = filename.length;
            
            if (len <= 13 ) {
                
                $("#file_browse").text(filename);
                
            }
            
            else {
                
                var part1 = filename.substr(0,5);
                var part2 = filename.substr(len - 8);
                 $("#file_browse").text(part1 + "..." + part2);
                
            }
                
        })
        
})

<input type="file" id="file_browser">
<p id="file_browse"></p>
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 2

你不能在js中更改属性名称，而不是你将拥有的安全性一个消息SecurityError: The operation is insecure.

如果你想要你这样做你需要它隐藏默认输入文件css go go go for you have tuto 并在<p></p>中添加您的filname自定义作为示例并放置在您想要的地方

如果您确实需要更改名称，请在服务器端执行此操作

美好的一天

Answer 3

一些技巧怎么样？

JS

$("#file_browse").change(function()
{
    var data = $(this).val();
    $(this).val();
    data = data.replace(/(.{1,10}).{1,}(.{6})/,"$1..$2");
    $("#file_browse").after("<div style='position:absolute; top:4px;  margin-left:230px;'>"+data+"</div>");

});

添加以下css

input[type=file]
{ 
        color:transparent;
}

调整左边距和上边距位置。

将文件名存储到变量data中。

然后使用$(this).val();创建一个空字段所以你的输入类型文件标签包含像No file choose这样的东西，这是因为要避免输入文件名这么长意味着滚动会出现。

使用包含点的图案替换。

然后使div标签写入文件名。

不要忘记为透明文件文本颜色添加css。

Answer 4

您最好使用name属性来获取文件名并隐藏默认文件输入，因为您无法更改其值。

$("#fileInput").change(function () {
  if (this.files.length === 0) {
    return;
  }
  
  var name = this.files[0].name;
  
  if (name.length > 14) {
    name = name.substr(0, 7) + "..." + name.substr(-7);
  }
  
  $("#fileNameText").text(name);
});

$("#chooseButton").click(function () {
  $("#fileInput").click();
});

<form>
  <input type="file" id="fileInput" style="display: none" />
  <button type="button" id="chooseButton">Choose file</button>
  <span id="fileNameText">Select a file</span>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

文件上传值改变了吗？

4 个答案: