javascript - 显示以 html 文件字段结尾的文件路径

Question

假设我们有<input type="file" name="my_file>. 如果我单击选择/选择（或我的浏览器显示的任何内容）并选择一个文件，则该字段将显示文件的路径。

如果文件路径很长，我看不到它的结尾：

如果文件路径是/very/long/path/to/my/file/my_file.png则只显示文件名的开头，/very/long/path...然后文件字段结束。

我想做一些事情（最好使用javascript），以便浏览器显示文件名结尾而不是开头：...y/file/my_file.png。

是否存在适用于所有浏览器的通用解决方案？

Answer 1

检查FileList API。他们有一个非常广泛的例子，你可能会觉得有用。

Answer 2

如果您使用的是 jQuery，请查看此插件 - https://github.com/ajaxray/bootstrap-file-field

它将文件输入字段显示为引导按钮，并将漂亮地显示选定的文件名。此外，您可以使用简单的数据属性设置各种限制。例如，data-file-types="image/jpeg,image/png"将限制选择除 jpg 和 png 图像之外的文件类型。