Question

我正在处理用户必须选择文件的表单。我的问题是当用户选择文件时我该怎么办才能看到文件名完整显示。例如，名称为toto_tata.xls的文件，可以看到选择后出现的文件名toto_tata.xls。我试过尺寸但没有成功。以下是我的输入标记的内容：

 <input id="myFile" type="file" name="myFile"class="myFile" required="true"/>

Answer 1

您应该将整个名称设置为输入的css属性宽度为100％。这是codepen：https://codepen.io/Juanito/pen/yXdbaX

input {
   width: 100%;
}

Answer 2

尝试这样的事情：

<input type="file" id="fileUpload"><span class="show-file-name"></span>

$('input[type=file]').change(function () {
  var fileName = $(this).val().match(/[^\\]*$/)[0];
  $('.show-file-name').text(fileName);
})

您将获得span文件的名称。唯一剩下的就是删除缩短的文件名。

这是有效的fiddle

Answer 3

使用CSS，您可以在输入中添加width: 100%;。

例如，

<input id="myFile" type="file" name="myFile"class="myFile" required="true" style="width: 100%;"/>

Answer 4

在输入中添加样式。 <input id="myFile" type="file" name="myFile"class="myFile" required="true" style="width:100%;"/>这对我来说很好。

选择后查看完整文件名

4 个答案: