Question

我遇到了一个小问题，我在我的一个HTML模板中使用了bootstrap。这是该页面的链接（http://demo.graygrids.com/themes/classix/post-ads.html）。您可以打开该页面并进入“ CLASSIFIED PICTURE ”部分。该部分看起来像此屏幕截图http://prntscr.com/cvu8nn

问题是，当我单击浏览按钮并选择我要上传的文件时，选择文件后我没有显示文件名。我想在选择文件后在框中查看文件名。此屏幕截图有助于您了解http://prntscr.com/cvuabs

提前致谢！请告诉我如何实现这一目标。

Answer 1

您必须使用jQuery来显示文件名，因为文件名将在浏览按钮单击时绑定。请参阅以下代码并进行更改：

<div tabindex="-1" class="form-control file-caption">
    <div style="width: 239px;" class="file-caption-name" id="divFileName"></div>
</div>



<div class="btn btn-primary btn-file">
    <i class="glyphicon glyphicon-folder-open"></i> &nbsp;Browse … 
    <input id="input-upload-img1" class="file" data-preview-file-type="text" type="file" onchange="setfilename(this.value);>
</div>


<script>
   function setfilename(val)
  {
    var fileName = val().split('\\').pop();
    $('#divFileName').html(fileName);
  }
</script>

选择文件后，引导程序文件输入不显示文件名

1 个答案: