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，有一些id用于简单的jquery访问：

<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（）返回数组中的最后一项。

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

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

1 个答案: