使用 JavaScript 获取选定文件的名称

Question

Here 是小提琴。我有一个项目，我正在制作不可样式化的表单元素GitHub，现在我正在制作文件输入。您可以在问题底部找到源代码。我在输入上使用了opacity: 0;，并在其上放置了<span></span>。 span 中的额外空间用于选择文件的名称，但我正在尝试使用 JavaScript 或 jQuery 来检索文件名。

HTML：

<span>Choose File<input type='file'></span>

CSS：

body {
    background: #252525;
    color: #96f226
}
span {
    background: #4a4a4a;
    cursor: pointer;
}
input {
    opacity: 0;
    cursor: pointer;
}

JS/jQuery:

none yet

Answer 1

使用 jQuery，您可以将文件输入的 onchange 事件绑定到一个函数，并在该函数中提取文件名。

这是您的 html，带有一些用于简单 jquery 访问的 id：

<span id="fileText"><input type='file' id="file">Choose File</span>

还有一些 jQuery 代码：

$("#file").on("change", function()
{
    var value = this.value.split(/[\/\\]/).pop();
    $("#fileText").append(value);
});

基本上，此函数将从输入中提取文件名（this.value），然后选择最后一个斜杠（目录）之后的文本。

split() 调用使用正则表达式以正斜杠或反斜杠将文本拆分为数组（我不确定它是否曾经是正斜杠，但为了安全起见）。如果您只想在反斜杠处拆分它，则不必使用正则表达式，只需调用 split("\")。 pop() 返回数组中的最后一项。

然后，我们将这个新文本附加到跨度的末尾。