1

这是小提琴。我有一个项目，我正在制作不可样式化的表单元素，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
4

1 回答 1

2

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

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

于 2013-09-07T04:33:41.940 回答