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

Question

Here是 fiddle 。我有一个元素，我正在制作不可设置样式的表单元素，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 事件绑定(bind)到一个函数，并在该函数内提取文件名。

这是您的 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() 返回数组中的最后一项。

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