Question

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jasny bootstrap -->
<script src="https://skblue.com/m3workx/sb-admin/vendor/jasny-bootstrap/js/jasny-bootstrap.min.js"></script>
<link href="https://skblue.com/m3workx/sb-admin/vendor/jasny-bootstrap/css/jasny-bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="https://skblue.com/m3workx/sb-admin/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Core JavaScript -->
<script src="https://skblue.com/m3workx/sb-admin/vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Custom Fonts -->
<script defer src="https://skblue.com/m3workx/fontawesome/js/packs/light.min.js"></script>
<script defer src="https://skblue.com/m3workx/fontawesome/js/packs/regular.min.js"></script>
<script defer src="https://skblue.com/m3workx/fontawesome/js/packs/solid.min.js"></script>
<script defer src="https://skblue.com/m3workx/fontawesome/js/fontawesome.min.js"></script>

                                <div class="fileinput fileinput-new input-group <-imageerror->" data-provides="fileinput" style="max-width: 500px;">
                                  <span class="input-group-addon"><i class="fa fa-image"></i></span>
                                  <div class="form-control" data-trigger="fileinput"><i class="fa fa-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
                                  <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Afbeelding Selecteren</span><span class="fileinput-exists">Veranderen</span><input type="file" name="vehicleimage" id="vehicleimage" accept="image/*"></span>
                                  <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Verwijderen</a>
                                </div>

＆＃13;

在我正在开发的网站上，我有一个图像的输入字段。直到文件名的长度变得大于x才看起来很好。那么我有没有办法在字段中显示文件名的子字符串，所以它变成了：

Screen Shot 2017-09...

这是我发现的：

           var limit = 8;

            var fileName = document.getElementById("vehicleimage").value();

            // get both parts
            var fileNameExtension = "." + fileName.split(".").pop();
            var fileNameBase = fileName.substring(0, fileName.length()-fileNameExtension.length());

            if(fileNameBase.length()>limit){
                // now limit it and set it as fileName
                fileName = fileNameBase.substring(0, limit) + '...' + fileNameExtension;
            }
            document.getElementById("vehicleimage").value = fileName;

但这并没有改变用户看到的内容。所以我的问题是，如何用jquery或javascript实现这个目标？

Answer 1

我认为您只需要使用CSS截断它？

#vehicleimage {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
}

Answer 2

我通过替换这一行解决了这个问题：

<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>

用这个：

<div class="form-control" data-trigger="fileinput" ><span class="fileinput-filename" style="text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-height: 1; max-height: 1*1;"></span></div>

限制HTML文件输入中显示的文本长度

2 个答案: