使用JavaScript獲取所選文件的名稱

Question

這是小提琴。 我有一個項目，我正在制作不可樣式化的表單元素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（）返回數組中的最后一項。

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