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

Getting the name of selected file using JavaScript

本文关键字：文件 JavaScript 获取 使用      更新时间：2023-09-26

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

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

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

相关文章：